No começo do mês de junho a equipe React anunciou o plano para o React 18.

Diferentemente da última versão que não trouxe muitas melhorias, essa versão está repleta de coisas novas e mudanças consideráveis.

Pois bem! Nesse momento está disponível apenas a versão ALPHA, mas isso já é o bastante para ativar nossa curiosidade e sair explorando as novidades que vem por aí.

Preparei um template para essa série de artigos onde irei apresentar as novas funcionalidades do React.

Agora, caso você queira explorar, poderá entrar nesse repositório e fazer um clone do template do React 18 ALPHA.

Nessa série de artigos veremos o que mudou em API Root, Strict Mode, Automatic Batching, Concurrent Mode (Concurrent Rendering), SSR de streaming e Suspense e o que á de novo startTransition, useDeferredValue e SuspenseList.

API Root

A nova API Root é a porta de entrada para os novos recursos .

Ela estará disponível juntamente com a API Root legada, assim as aplicações poderão ser migradas cada qual no seu tempo.

Se eventualmente você queira acompanhar essa discussão da equipe React, é só acessar aqui.

A grande novidade aqui é a disponibilização do createRoot, que mudará um pouco a sintaxe de como iniciamos nossas aplicações.

Modo antigo:

import { render } from “react-dom”;
import { App } from “./App”;

render(<App />, document.getElementById(‘root’))

Modo novo:

import { createRoot } from “react-dom”;
import { App } from “./App”;

const container = document.getElementById(‘root’);

const root = createRoot(container);

root.render(<App />);

Percebeu? Note que a raiz e a aplicação estão separadas, isso traz facilidade para implementar futuras atualizações.

Devido às dificuldades de sincronização em aplicações com server-side render, outra mudança que a API Root trouxe foi eliminar a função hydrate do render, que agora passa ser uma opção de configuração do createRoot.

Modo antigo:

import { hydrate } from “react-dom”;
import { App } from “./App”;

hydrate(<App />, document.getElementById(‘root’))

Modo novo:

import { createRoot } from “react-dom”;
import { App } from “./App”;

const container = document.getElementById(‘root’);

const root = createRoot(container, {hydrate: true});

root.render(<App />);

Ou ainda, temos a opção da função do hydrateRoot, que ao contrário do createRoot, não será necessário chamar a função render.

import { hydrateRoot } from “react-dom”;
import { App } from “./App”;

const container = document.getElementById(‘root’);

const root = hydrateRoot(container, <App user=”Zappts” />);

Você deve ter notado que o hydrateRoot ao contrário do createRoot, aceita como segundo parâmetro um componente JSX.

Isso acontece porque a renderização inicial da árvore de elementos do lado do cliente deve corresponder a do lado do servidor.

Agora, se você busca renderizar novamente a aplicação, pode fazer sem ter a necessidade de criar um novo container, apenas utilizando a variável que foi instanciada na criação.

//…
const root = hydrateRoot(container, <App culture=”Sawabona” />);
/*
Ação necessaria para atualização
*/
root.render(<App culture=”Shikoba”/>);

Após o lançamento do React 18, aplicando essa pequena mudança, temos acesso a muitas melhorias e novas funcionalidades.

Irei apresentá-las nos próximos artigos.

Espero que você esteja tão ansioso quanto eu para essa atualização.

Se ficou alguma dúvida ou quer saber mais sobre algo que mencionei nesse artigo, ou apenas para dizer o que achou, não deixe de escrever nos comentários, isso vai ser muito importante para que eu possa trazer conteúdos relevantes.

Muito obrigado por ter lido até aqui e até o próximo capítulo.

Esse artigo foi desenvolvido por Tadeu Agostini, desenvolvedor front-end Web da Zappts.

Confira a parte #2 desta publicação clicando aqui!