O que há de novo no React v18?

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. Levante cláusula abordará algumas novas adições e porquê atualizar para o React v18.

Porquê atualizar para o React 18

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

npm install react react-dom

Ou se você estiver usando fios:

yarn add react react-dom

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

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

1. Modo Estrito

StrictMode é um recurso que você pode usar para primar possíveis problemas em um aplicativo. As verificações de modo estrito são executadas somente 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 segmento do seu aplicativo. Por exemplo, você pode habilitá-lo para todos os seus componentes ou somente para alguns deles.

import React from 'react';
function DemoExample() {
return (
<div>
<FirstComponent />
<React.StrictMode>
<SecondComponent />
<ThirdComponent />
</React.StrictMode>
<FourthComponent />
</div>
);
}

No código supra, todos os quatro componentes seriam verificados quanto a possíveis problemas. No entanto, as verificações de modo estrito serão aplicadas somente ao e ao .

StrictMode também ajuda de outras maneiras, porquê:

• Identificando componentes com ciclos de vida inseguros: Se um componente tiver um método de ciclo de vida marcado porquê 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 (porquê 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 prometer que ele seja sincronizado corretamente.

No universal, 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 porquê 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 porquê 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 um tanto 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 porquê uma transição. Cá está um exemplo:

import { startTransition } from 'react';
startTransition(() => {
});

Esse código marcaria todas as atualizações de estado dentro da função startTransition porquê 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 ao trabalhar 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 projecto.

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 peroração de uma micro-tarefa antes de renderizar novamente.

4. Novos Ganchos

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

React 18 oferece desempenho requintado do aplicativo

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