React 18 lançado

O React 18 já está disponível e esta versão inclui melhorias prontas para uso, como lotes automáticos, novas APIs como startTransition e suporte para renderização do lado do servidor de streaming com Suspense.

O anúncio afirma que muitos dos recursos do React 18 são construídos em cima do novo renderizador simultâneo, uma mudança que desbloqueia novos recursos poderosos. O React simultâneo é opcional e só será habilitado quando os usuários estiverem usando simultaneidade, mas a equipe de desenvolvimento acredita que terá um impacto significativo na maneira como as massas criam aplicativos.

" Passamos anos pesquisando e desenvolvendo suporte para a simultaneidade do React e prestamos atenção especial em fornecer um caminho de adoção gradual para usuários existentes. No verão passado, formamos o grupo de trabalho React 18 para coletar feedback de especialistas da comunidade para garantir que toda a experiência de atualização suave do React A para o ecossistema. ”

Os novos recursos do React 18 são os seguintes:

Processamento automático em lote. Batching é o agrupamento do React de várias atualizações de estado em uma única re-renderização para melhor desempenho. Sem lotes automáticos, só podemos lotear atualizações em manipuladores de eventos React. Por padrão, atualizações dentro de Promise, setTimeout, manipuladores de eventos nativos ou qualquer outro evento não são agrupados em React. Com o lote automático, essas atualizações são agrupadas automaticamente:

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.`
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

Transições são um novo conceito em React para diferenciar entre atualizações urgentes e não urgentes.
- Atualizações urgentes refletem interações diretas, como digitar, clicar, pressionar, etc.
- As atualizações de transição fazem a transição da interface do usuário de uma visualização para outra.

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

Novo recurso Suspense . Suspense permite especificar o estado de carregamento da árvore de componentes declarativamente se uma parte da árvore de componentes não estiver pronta para ser exibida:

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

O Suspense torna o "estado de carregamento da interface do usuário" um conceito declarativo de primeira classe no modelo de programação React. Isso nos permite construir funcionalidades de nível superior em cima dele.

O React 18 adicionou suporte para Suspense no servidor e ampliou seus recursos com recursos de renderização simultânea. Suspense no React 18 funciona melhor com a API de transição. Se você suspender durante a transição, o React impedirá que o conteúdo já visível seja substituído por fallback. Em vez disso, o React atrasa a renderização até que dados suficientes sejam carregados para evitar um estado de carregamento incorreto.

Novas APIs de renderização de cliente e servidor. Essas alterações permitem que os usuários continuem usando a API antiga no modo React 17 ao atualizar para a nova API no React 18.
Novos comportamentos do modo estrito . Esse recurso fornecerá melhor desempenho pronto para uso para aplicativos React, mas exige que os componentes sejam resilientes aos efeitos de várias montagens e destruições. A maioria dos efeitos funciona sem alterações, mas alguns efeitos assumem que são montados ou destruídos apenas uma vez. Para ajudar a resolver esses problemas, o React 18 apresenta uma nova inspeção somente de desenvolvimento para o modo estrito. Essa nova verificação desmontará e remontará automaticamente cada componente sempre que um componente for montado pela primeira vez e restaurará o estado anterior na segunda montagem. Em

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

Mais detalhes podem ser vistos: https://reactjs.org/blog/2022/03/29/react-v18.html

Acho que você gosta