Pensando em tentar codificar com React? Aqui estão os principais novos recursos para experimentar no React 18.

React é uma biblioteca JavaScript de código aberto muito popular criada pelo Facebook em 2013. Devido à sua flexibilidade, muitos desenvolvedores aproveitam alguns de seus recursos na construção de componentes de interface do usuário (UI) rápidos, eficientes e reutilizáveis.

Em março de 2022, a equipe lançou a versão mais recente e esperada da biblioteca React, React 18, que inclui novos recursos com foco na melhoria do desempenho do aplicativo.

Os novos recursos do React 18

O React 18 consiste em alguns novos recursos úteis adicionados ao biblioteca JavaScript de código aberto. Muitas dessas mudanças não estavam na versão anterior, enquanto outros recursos foram aprimorados. Alguns desses recursos incluem; uma nova API raiz, Lotes Automáticos, API de Transição, API de Suspense e o lançamento de novos Hooks.

Nova API Raiz

A API raiz no React acompanha como o componente de nível superior é renderizado na árvore. Nas versões anteriores do React, o

renderizar O método foi usado para executar a renderização, que agora é chamada de API raiz herdada.

No entanto, o React 18 vem com uma nova API raiz que cria uma raiz usando o criarRoot método e, em seguida, renderiza um componente React para a raiz criada usando o método renderizar método.

Esta nova API raiz lhe dará acesso aos recursos desta versão recente, como o recurso de API de transição discutido posteriormente. Embora a maneira antiga ainda funcione no React 18, ela pode ser desativada no futuro.

O snippet abaixo mostra como a API raiz é estruturada tanto na forma antiga quanto na nova.

API raiz herdada

importar ReactDOM de'reagir';
importar Aplicativo de'./Aplicativo';
ReactDOM.render(<Aplicativo />, documento.getElementById('aplicativo'))

Nova API Raiz

importar ReactDOM de'react-dom/client';
importar Aplicativo de'./Aplicativo';
const root = ReactDOM.createRoot(documento.getElementById('aplicativo'));
root.render(<Aplicativo />)

Lote Automático

O lote no React envolve várias atualizações de estado em uma única renderização em cada evento do navegador, por exemplo, um clique em evento. Quaisquer alterações de estado que ocorreram fora de um evento, como uma promessa ou retorno de chamada, não serão agrupadas.

Com o React 18, as atualizações de estado em lote são feitas automaticamente, independentemente de onde essas atualizações ocorram. Esse recurso oferece melhorias imediatas no desempenho e no tempo de renderização. No entanto, se você tiver um estado de componente que não deseja que seja agrupado, poderá desativá-lo usando o flushSync método. Abaixo está um trecho de exemplo de como isso pode ser feito;

importar { flushSync } de'reagir';
funçãomanipularClique() {
 flushSync(() => {
 setCont(contar => contar + 1);
]});
 flushSync(() => {
 setStore(loja => !loja);
});
}

API de transição

No React, as atualizações feitas na interface do usuário podem ser categorizadas como atualizações urgentes e as atualizações de transição também chamadas de não urgentes. Um exemplo de atualização urgente pode ser o caso de inserir um texto em um campo, enquanto uma atualização de transição pode ser uma funcionalidade de filtragem de pesquisa.

Agora, se essas atualizações ocorrerem simultaneamente, isso pode ser considerado uma operação pesada e pode levar ao congelamento de seu aplicativo. Para resolver esse problema, é aqui que a API de transição chamada startTransition vem jogar. Esse novo recurso informa ao React quais atualizações devem ser marcadas como "transições", melhorando as interações do usuário. Aqui está um exemplo de código de como funciona;

importar { início da transição } de"reagir";
startTransition(() => {
 setSearch (entrada);
});

suspense

Quando um aplicativo é renderizado no servidor, um arquivo HTML estático é retornado ao navegador, permitindo que o usuário veja a aparência do aplicativo enquanto o JavaScript é carregado. Quando o arquivo é carregado, o HTML se torna dinâmico com o que é conhecido como hidratação. A deficiência aqui é que, se tudo isso não estiver em vigor, seu aplicativo não se tornará interativo.

Para resolver esse problema, o React 18 fornece dois novos recursos de renderização do lado do servidor (SSR) usando o suspense componente;

  • O streaming de HTML permite que partes de um componente sejam enviadas à medida que são renderizadas.
  • A hidratação seletiva prioriza a interatividade dos componentes selecionados por um usuário.

Novos ganchos

Um grande ponto de virada para React foi a introdução de ganchos em React versão 16 que permite que os componentes de função acessem estados e outros recursos do React sem escrever classes. O React 18 vem com cinco novos ganchos para melhorar a experiência dos desenvolvedores;

  • useId: Este hook nos permite criar um identificador único (ID) em nossa aplicação tanto no servidor quanto no cliente.
  • useTransition: É usado ao lado startTransition para criar uma nova atualização de estado que pode ser denominada não urgente.
  • useDefferedValue: Permite adiar atualizações menos urgentes.
  • useSyncExternalStore: Este gancho é útil ao implementar assinaturas para fontes de dados externas.
  • useInsertionEffect: Este gancho é limitado a autores de bibliotecas CSS-in-JS para injetar estilos no DOM.

Como atualizar para o React 18

Para executar uma atualização, o gerenciador de pacotes npm ou yarn pode ser usado executando o seguinte comando no terminal.

npm instalar reagir reagir

ou

fio adicionar reagir reagir-dom

Em seguida, você precisará fazer uma alteração no index.js arquivo no diretório raiz da pasta do projeto da API legada para a nova API raiz, conforme mostrado anteriormente.

Como configurar um novo projeto React 18

Para configurar um novo projeto React 18, o pacote create-react-app é instalado com npm ou yarn no terminal;

npx criar-react-app meu-react-app

ou

adição de fios criar-react-app meu-react-app

Melhore o desempenho do seu aplicativo com o React 18

Agora você conhece alguns novos recursos do React 18, como a nova API raiz, Suspense, Transition ou Automatic Batching, e como atualizar para esta nova versão e configurá-la do zero.

Essas mudanças recentes no React estão prontas para você experimentar agora mesmo.