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:

ProductList.jsximport {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:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

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

App.jsxconst [isPending, startTransition] = useTransition();

E a linha que usa o isPending:

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

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

App.jsxfunction updateFilterHandler(event) {
  setFilterTerm(event.target.value);
}