Hook de Otimização de Desempenho useDeferredValue no React

O hook de otimização de desempenho useDeferredValue, assim como o useTransition, ajuda a acelerar a interface do usuário, mas faz isso de uma maneira um pouco diferente.

Dê uma olhada na lição anterior e veja como, no caso do useTransition, nós envolviamos a função de atualização setFilterTerm. Bem, o código de atualização de estado pode não estar sempre disponível. Ele pode estar escondido, por exemplo, em uma biblioteca que você incluiu. Nesse caso, podemos usar o hook useDeferredValue. Então precisamos envolver o próprio estado ou o resultado calculado usando esse estado, reduzindo assim sua prioridade.

Vamos analisar o seguinte trecho de código do componente filho ProductList:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Observe que aqui envolvemos em useDeferredValue a própria variável products, que obtivemos das props do componente. Em seguida, armazenamos o resultado em deferredProducts, com a qual trabalharemos a partir de agora:

const deferredProducts = useDeferredValue(products);

Agora, se no trecho de código do componente principal, que vimos na lição anterior, removermos a linha:

const [isPending, startTransition] = useTransition();

E a linha que usa o isPending:

{isPending && <p>atualizando ...</p>}

E também remover o wrapper da função setFilterTerm, obteremos o mesmo resultado que na lição anterior:

function updateFilterHandler(event) {
	setFilterTerm(event.target.value);
}