O tão esperado React v18 foi finalmente lançado há alguns meses. Embora não tenha havido grandes mudanças, houve alguns recursos interessantes adicionados que valem a pena dar uma olhada. Este artigo abordará algumas novas adições e como atualizar para o React v18.

Como atualizar para o React 18

Para instalar a versão mais recente do React, execute este comando em um terminal:

npm instalar reagir reagir-dom

Ou se você estiver usando fios:

fio adicionar reagir reagir-dom

Depois de instalar a versão mais recente, você pode começar a aproveitar seus novos recursos.

Existem várias adições no React 18; aqui estão quatro dos mais notáveis.

1. modo estrito

StrictMode é um recurso que você pode usar para destacar possíveis problemas em um aplicativo. As verificações de modo estrito são executadas apenas no modo de desenvolvimento e não afetarão a compilação de produção. No entanto, eles podem ser muito úteis na identificação de possíveis problemas em seu código.

Você pode habilitar o modo estrito para qualquer parte do seu aplicativo. Por exemplo, você pode habilitá-lo para todos os seus componentes ou apenas para alguns deles.

instagram viewer 

importar Reagir a partir de 'reagir';
funçãoExemplo de demonstração() {
Retorna (
<div>
<PrimeiroComponente />
<Reagir. Modo estrito>
<Segundo Componente />
<Terceiro Componente />
</React.StrictMode>
<Quarto Componente />
</div>
 );
}

No código acima, todos os quatro componentes seriam verificados quanto a possíveis problemas. No entanto, as verificações de modo estrito só se aplicam ao e .

StrictMode também ajuda de outras maneiras, como:

  • Identificando componentes com ciclos de vida inseguros: Se um componente tiver um método de ciclo de vida marcado como inseguro, o modo estrito o avisará sobre isso.
  • Aviso sobre o uso da API de referência de string legada: Se você estiver usando a API de referência de string legada, o modo estrito avisará sobre seu uso.
  • Aviso sobre o uso obsoleto do findDOMNode: Se você estiver usando a API findDOMNode obsoleta, o modo estrito o avisará sobre isso.
  • Detectando efeitos colaterais inesperados: Se um componente estiver acionando efeitos colaterais (como setState) em locais inesperados, o modo estrito o avisará sobre isso.
  • Detectando a API de contexto legada: Se você estiver usando a API de contexto herdada (que agora está obsoleta), o modo estrito o avisará sobre isso.
  • Garantindo o estado reutilizável: Se você tiver um estado usado por vários componentes, o modo estrito ajudará a garantir que ele seja sincronizado corretamente.

No geral, o modo estrito pode ser um recurso útil no desenvolvimento para ajudar a identificar possíveis problemas em seu código.

2. Transições

As transições permitem que você marque determinadas atualizações da interface do usuário como não urgentes. Isso significa que o React pode priorizar outras atualizações que são mais importantes.

Por exemplo, se você tiver dois campos de texto — um para uma consulta de pesquisa e outro para seus resultados — você deve marcar o campo de texto de resultados de pesquisa como uma transição. Dessa forma, o React sabe que não precisa re-renderizar urgentemente esse campo de texto toda vez que o usuário digitar algo no campo de texto da consulta de pesquisa.

Você pode usar a função startTransition para marcar uma atualização da interface do usuário como uma transição. Aqui está um exemplo:

importar { startTransição } a partir de 'reagir';
startTransition(() => {
// Marca qualquer atualização de estado não urgente dentro como transições
});

Esse código marcaria todas as atualizações de estado dentro da função startTransition como transições. Dessa forma, o React pode se concentrar em outras atualizações de interface do usuário mais importantes.

3. Lote Automático

O React fornece um recurso útil chamado batching que reduz o número de re-renderizações que ocorrem quando um estado muda. Isso pode ser muito útil para otimizar o desempenho, principalmente quando trabalhando com código assíncrono.

Anteriormente, se você tivesse uma promessa ou estivesse fazendo uma chamada de rede, as atualizações de estado não seriam agrupadas e o React teria que renderizar várias vezes. No entanto, com lotes automáticos no React 18, todas as atualizações de estado são agrupadas, mesmo dentro de promessas, setTimeouts e callbacks de eventos. Isso reduz significativamente o trabalho que o React tem que fazer em segundo plano.

Você pode fazer atualizações de estado em lote manualmente usando a função flushSync, mas a partir do React 18, esse processo agora é automático. Isso resulta em um desempenho muito melhor, pois o React aguardará a conclusão de uma micro-tarefa antes de renderizar novamente.

4. Novos Ganchos

A versão 18 apresenta muitos novos Ganchos de reação, incluindo useId, useTransition e useDeferredValue. Esses novos Hooks fornecem uma ótima maneira de adicionar funcionalidades extras aos seus aplicativos React com o mínimo de esforço.

React 18 oferece desempenho aprimorado do aplicativo

O React 18 está aqui e traz algumas grandes melhorias no desempenho de aplicativos da web. Com a nova versão do React, você pode criar facilmente aplicativos da web que são mais responsivos e têm melhor desempenho geral. Portanto, se você deseja criar um aplicativo da Web que funcione sem problemas e tenha uma ótima aparência, verifique o React 18.