Como usar useDeferredValue no React com TypeScript para melhorar a performance
5 minutos para ler
O que é o useDeferredValue?
O useDeferredValue é um hook introduzido no React 18 que permite adiar a atualização de um valor em situações onde a renderização pode ser custosa ou onde a prioridade deve ser dada a outras atualizações mais críticas. Ele é especialmente útil em cenários onde você tem uma entrada de usuário (como um campo de pesquisa) que precisa ser processada, mas não precisa ser refletida imediatamente na interface.
Em outras palavras, o useDeferredValue ajuda a evitar gargalos de performance ao permitir que o React priorize atualizações mais importantes, enquanto adia as menos críticas.
Quando usar o useDeferredValue?
Você deve considerar o uso do useDeferredValue em situações como:
- Filtragem de listas grandes: Quando o usuário digita em um campo de pesquisa e a lista de resultados é filtrada em tempo real.
- Renderizações custosas: Quando o cálculo de um valor derivado é complexo e pode bloquear a thread principal.
- Priorização de atualizações: Quando você quer garantir que a interface do usuário permaneça responsiva, mesmo durante operações pesadas.
Exemplo Simples: Adiando a renderização de um valor
Vamos começar com um exemplo básico para entender como o useDeferredValue funciona. Imagine um componente onde o usuário digita um texto, e queremos exibir tanto o valor atual quanto uma versão adiada desse valor.
import React, { useState, useDeferredValue } from 'react';
const SimpleExample: React.FC = () => {
const [inputValue, setInputValue] = useState('');
const deferredValue = useDeferredValue(inputValue);
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Digite algo..."
/>
<p>Valor atual: {inputValue}</p>
<p>Valor adiado: {deferredValue}</p>
</div>
);
};
export default SimpleExample;
Neste exemplo:
O inputValue é o valor atual do input.
O deferredValue é uma versão adiada do inputValue, que pode ser útil para evitar renderizações desnecessárias ou para priorizar outras atualizações mais críticas.
Exemplo Complexo: Filtrando uma lista com useDeferredValue
Agora, vamos para um exemplo mais complexo. Imagine que você tem uma lista de itens e deseja filtrá-la com base em um termo de pesquisa. O useDeferredValue pode ser usado para adiar a atualização da lista filtrada, mantendo a interface responsiva enquanto o usuário digita.
import React, { useState, useDeferredValue, useMemo } from 'react';
interface Item {
id: number;
name: string;
}
const ComplexExample: React.FC = () => {
const [searchTerm, setSearchTerm] = useState('');
const deferredSearchTerm = useDeferredValue(searchTerm);
const items: Item[] = [
{ id: 1, name: 'React' },
{ id: 2, name: 'Javascript' },
{ id: 3, name: 'NextJS' },
{ id: 4, name: 'Tailwind' },
{ id: 5, name: 'Github' },
{ id: 6, name: 'Figma' },
];
const filteredItems = useMemo(() => {
return items.filter(item =>
item.name.toLowerCase().includes(deferredSearchTerm.toLowerCase())
);
}, [deferredSearchTerm]);
return (
<div>
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Pesquisar..."
/>
<ul>
{filteredItems.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
};
export default ComplexExample;
Como funciona:
O searchTerm é o valor atual do input de pesquisa.
O deferredSearchTerm é uma versão adiada do searchTerm, que é usada para filtrar a lista de itens.
O useMemo é usado para memoizar a lista filtrada, evitando recálculos desnecessários enquanto o valor adiado não muda.
Isso permite que a interface do usuário permaneça responsiva, mesmo quando o usuário digita rapidamente no campo de pesquisa.
Benefícios do useDeferredValue
Melhora a responsividade da interface: Ao adiar atualizações menos críticas, você garante que a interface do usuário continue fluida.
Reduz renderizações desnecessárias: Evita que componentes sejam renderizados repetidamente enquanto o valor ainda está sendo atualizado.
Fácil de integrar: O useDeferredValue é simples de usar e pode ser combinado com outros hooks como useMemo e useCallback para otimizações adicionais.
O useDeferredValue é uma ferramenta poderosa para melhorar a performance de aplicações React, especialmente em cenários onde você precisa adiar atualizações que não são críticas para a experiência do usuário. Com ele, você pode garantir que sua aplicação permaneça responsiva, mesmo durante operações pesadas ou em listas grandes.
Se você ainda não experimentou o useDeferredValue, recomendamos testá-lo em seus projetos e ver como ele pode ajudar a otimizar a renderização de componentes. E se você já usa, conte nos comentários como tem sido sua experiência!
Live examples:
https://codesandbox.io/p/sandbox/elastic-ellis-46vd6v
https://codesandbox.io/p/sandbox/bold-lena-9ljcyq