Em março de 2022, a equipe do React anunciou o lançamento oficial do React 18. Esta versão veio com uma série de novos recursos voltados para melhoria de desempenho, baseados no conceito de “renderização simultânea”. A ideia por trás da renderização simultânea é tornar o processo de renderização para o DOM interrompível.
Entre os novos recursos estão cinco ganchos: useId, useTransition, useDerredValue, useSyncExternalStore e useInsertionEffect.
Reagir use Transition Hook
Por padrão, todas as atualizações de estado do React são urgentes. Diferentes atualizações de estado em seu aplicativo competem pelos mesmos recursos, tornando-o mais lento. O usoTransição Gancho de reação resolve esse problema permitindo que você marque algumas atualizações de estado como não urgentes. Isso permite que atualizações de estado urgentes interrompam aquelas com prioridade mais baixa.
O componente SearchPage
Esse programa simples imita um mecanismo de pesquisa que atualiza dois estados - um campo de entrada e alguns resultados de pesquisa.
importar { useEstado } a partir de "reagir";
funçãoPágina de pesquisa() {
const [input, setInput] = useState("")
const [Lista, setList] = useState([]);const listaTamanho = 30000
funçãomanipularAlterar(e) {
setInput(e.alvo.valor);
const listaItens = [];por (deixar eu = 0; i < listaTamanho; i++){
lista de itens.Empurre(e.alvo.valor);
}setList(listaItens);
}Retorna (
<div>
<etiqueta>Pesquise na internet: </label>
<tipo de entrada ="texto" value={input} onChange={handleChange} />
{Lista.map((item, índice) => {
Retorna <chave div={índice}>{item}</div>
})}
</div>
);
}
exportarpredefinição Página de Pesquisa;
O componente de aplicativo atualizado
importar Página de pesquisa a partir de "./Components/SearchPage";funçãoAplicativo() {
Retorna (
<div>
< Página de pesquisa/>
</div>
);
}
exportarpredefinição Aplicativo;
O código acima renderiza uma aplicação React com um campo de entrada:
Conforme você começa a digitar os caracteres no campo, 30.000 cópias do texto digitado aparecerão abaixo:
Se você digitar vários caracteres em rápida sucessão, deverá detectar um atraso. Afeta o tempo que os caracteres levam para aparecer no campo de entrada e na “área de resultado da pesquisa”. Isso ocorre porque o React está executando ambas as atualizações de estado ao mesmo tempo.
Se a demonstração for muito lenta ou muito rápida para você, tente ajustar o listSize valor em conformidade.
A inserção do gancho useTransition no aplicativo permitirá que você priorize uma atualização de estado sobre a outra.
Usando o gancho useTransition
importar {useState, useTransition} a partir de "reagir";funçãoPágina de pesquisa() {
const [isPending, startTransition] = useTransition();
const [input, setInput] = useState("")
const [Lista, setList] = useState([]);const listaTamanho = 30000
funçãomanipularAlterar(e) {
setInput(e.alvo.valor);
startTransition(() => {
const listaItens = [];por (deixar eu = 0; i < listaTamanho; i++){
lista de itens.Empurre(e.alvo.valor);
}setList(listaItens);
});
}Retorna (
<div>
<etiqueta>Pesquise na internet: </label>
<tipo de entrada ="texto" value={input} onChange={handleChange} />{pendente? "...Carregando resultados": list.map((item, índice) => {
Retorna <chave div={índice}>{item}</div>
})}
</div>
);
}
exportarpredefinição Página de Pesquisa;
Atualizando seu Página de pesquisa O componente com o código acima priorizará o campo de entrada sobre a “área de resultado da pesquisa”. Essa simples mudança tem um efeito claro: você deve começar a ver o texto que digita no campo de entrada imediatamente. Apenas a “área de resultados da pesquisa” ainda terá um pequeno atraso. Isso se deve ao startTransitioninterface de programação de aplicativos (API) do gancho useTransition.
O código que renderiza os resultados da pesquisa para a interface do usuário agora está usando o startTransition API. Isso permite que o campo de entrada interrompa a atualização do estado dos resultados da pesquisa. Quando o pendente() A função exibe “…Loading result” indica que uma transição (de um estado para o próximo) está acontecendo.
Reagir useDeferredValue Hook
O gancho useDeferredValue permite adiar a nova renderização de uma atualização de estado não solicitada. Como o gancho useTransition, o gancho useDeferredValue é um gancho de simultaneidade. O gancho useDeferredValue permite que um estado mantenha seu valor original enquanto estiver em transição.
O componente SearchPage com o gancho useDeferredValue()
importar { useState, useTransition, useDeferredValue } a partir de "reagir";funçãoPágina de pesquisa() {
const [,startTransition] = useTransition();
const [input, setInput] = useState("")
const [Lista, setList] = useState([]);const listaTamanho = 30000
funçãomanipularAlterar(e) {
setInput(e.alvo.valor);
startTransition(() => {
const listaItens = [];por (deixar eu = 0; i < listaTamanho; i++){
lista de itens.Empurre(e.alvo.valor);
}setList(listaItens);
});
}
const deferredValue = useDeferredValue (entrada);
Retorna (
<div>
<etiqueta>Pesquise na internet: </label>
<tipo de entrada ="texto" value={input} onChange={handleChange} />{Lista.map((item, índice) => {
Retorna <div key={index} input={deferredValue} >{item}</div>
})}
</div>
);
}
exportarpredefinição Página de Pesquisa;
No código acima você verá que o pendente() função não existe mais. Isto porque o valor diferido variável do gancho useDeferredValue substitui o pendente() função durante a transição de estado. Em vez da lista de resultados da pesquisa ser atualizada quando você digita um novo caractere, ela manterá seus valores antigos até que o aplicativo atualize o estado.
Reagir useSyncExternalStore Hook
Ao contrário dos ganchos useTransition e useDeferredValue que funcionam com código de aplicativo, useSyncExternalStore funciona com bibliotecas. Ele permite que seu aplicativo React assine e leia dados de bibliotecas externas. O gancho useSyncExternalStore usa a seguinte declaração:
const state = useSyncExternalStore (subscrever, getSnapshot[, getServerSnapshot]);Esta assinatura contém o seguinte:
- Estado: o valor do armazenamento de dados que o gancho useSyncExternalStore retorna.
- se inscrever: registra um retorno de chamada quando o armazenamento de dados é alterado.
- getSnapshot: retorna o valor atual do armazenamento de dados.
- getServerSnapshot: retorna o instantâneo usado durante a renderização do servidor.
Com o useSyncExternalStore, você pode assinar um armazenamento de dados inteiro ou um campo específico em um armazenamento de dados.
Reagir useInsertionEffect Hook
O hook useInsertionEffect é outro novo hook do React que funciona com bibliotecas. No entanto, em vez de armazenamentos de dados, o gancho useInsertionEffect funciona com bibliotecas CSS-in-JS. Este gancho aborda problemas de desempenho de renderização de estilo. Ele estiliza o DOM antes de ler o layout no gancho useLayoutEffect.
Reaja o gancho useId
Você usa o gancho useId em situações que exigem IDs exclusivos (exceto chaves em uma lista). Seu principal objetivo é gerar IDs que permaneçam únicos entre cliente e servidor, evitando o erro de incompatibilidade de hidratação do servidor React. O gancho useId usa a seguinte declaração:
const id = useId()Na declaração Eu iria é uma string única que inclui o : símbolo. Após a declaração, você pode passar o Eu iria variável diretamente para o(s) elemento(s) que precisam dela.
Que valor esses novos ganchos adicionam ao React?
Os ganchos useTransition e useDeferredValue são ganchos de código de aplicativo. Por meio da renderização de simultaneidade, eles melhoram o desempenho dos aplicativos. O gancho useId resolve o erro de incompatibilidade de hidratação criando IDs exclusivos no cliente e no servidor.
Os ganchos useSyncExternalStore e useInsertionEffect funcionam com bibliotecas externas para facilitar a renderização de simultaneidade. O gancho useInsertionEffect funciona com bibliotecas CSS-in-JS. O gancho useSyncExternalStore funciona com bibliotecas de armazenamento de dados como o armazenamento Redux.
Juntos, esses ganchos dão um grande impulso ao desempenho, o que, por sua vez, melhora a experiência do usuário.