Aplicações práticas: busca, rolagem e redimensionamento

Em um componente de pesquisa em tempo real, mantenha duas variáveis de estado separadas: inputValue para a entrada bruta (atualizada a cada tecla, mantendo o campo de entrada responsivo) e debouncedQuery de useDebounce(inputValue, 300) (atualizada 300 ms depois que a digitação para, acionando a chamada à API). Essa separação fornece feedback visual instantâneo sem solicitações excessivas.

Mostre um indicador de carregamento assim que o usuário começar a digitar, não apenas quando a chamada à API começar. Defina isLoading: true sempre que inputValue !== debouncedQuery — esses valores ficam dessincronizados enquanto o atraso está pendente. Quando a consulta se estabilizar e a busca for concluída, defina-o novamente como false. Assim, os usuários veem um indicador de carregamento responsivo durante todo o processo.

Um efeito de paralaxe ou uma barra de progresso de leitura é atualizado com base na posição de rolagem. Limite o manipulador de rolagem a no máximo 60 fps usando um atraso de 16 ms: const throttledScrollY = useThrottle(scrollY, 16). A interface é atualizada suavemente sem o custo de recalcular a posição a cada pixel da rolagem.

O monitoramento do redimensionamento da janela para recalcular o layout deve usar um atraso, não uma limitação de frequência. O cálculo do layout só precisa ser executado uma vez depois que o usuário terminar de redimensionar. Use um atraso de 200 ms nas dimensões da janela. Durante o redimensionamento, a interface pode mostrar um estado simplificado; o layout recalculado aparece quando o redimensionamento para.

Quando debouncedQuery mudar, crie um novo AbortController e passe o signal para fetch(url, { signal }). Retorne uma função de limpeza que chame controller.abort(). Isso cancela qualquer solicitação em andamento da consulta anterior quando uma nova consulta com atraso chega, evitando condições de corrida nas quais uma resposta anterior mais lenta substitui uma posterior mais rápida.

Sem AbortController, se o usuário digitar "re", esperar e digitar "react", a segunda consulta poderá retornar antes da primeira (devido ao armazenamento em cache). Os resultados da pesquisa mostrariam brevemente os resultados de React e, depois, seriam substituídos pelos resultados antigos de "re". AbortController evita isso cancelando completamente a solicitação anterior.

A lista suspensa combina atraso para as chamadas à API com estado imediato para exibir a entrada. inputValue controla o que aparece no campo de texto. useDebounce(inputValue, 250) controla quando a busca de sugestões é acionada. A lista de sugestões é renderizada a partir do estado dos resultados obtidos, que é separado dos dois estados de entrada.

A validação assíncrona de formulários, como verificar se um e-mail já existe, deve usar um atraso para evitar sobrecarregar o servidor a cada tecla. Use um atraso de 400 ms no valor do campo e dispare a solicitação de validação em um useEffect que dependa do valor com atraso. Mostre um indicador de carregamento no campo enquanto a validação estiver pendente.

O debounce é perfeito para salvar automaticamente o conteúdo do formulário enquanto o usuário digita. Defina um atraso de 1000 ms no objeto com os valores do formulário. Quando o valor com atraso mudar, acione um salvamento em localStorage ou em um ponto de acesso da API. O usuário verá o indicador "Salvando..." enquanto o atraso estiver pendente e "Salvo" quando a solicitação for concluída.

Os valores de atraso são decisões de experiência do usuário. Para pesquisa: 200–300 ms equilibram a responsividade com a redução de solicitações. Para redimensionamento: 150–200 ms são aceitáveis, porque os usuários esperam que o layout se estabilize depois do redimensionamento. Para salvamento automático: 1000 ms dão tempo para o usuário digitar uma frase antes de salvar. Ajuste o valor com base na velocidade esperada da interação.

Aplicativos reais frequentemente precisam de várias otimizações ao mesmo tempo. Um editor de documentos pode aplicar debounce ao salvamento automático (1 s), limitar a frequência do cálculo da contagem de palavras (500 ms) e usar IntersectionObserver para análise. Essas técnicas se combinam bem porque cada uma opera de forma independente, com seu próprio temporizador e escopo.

Por que você deve usar AbortController junto com uma consulta de pesquisa com atraso?

Use useDebounce para entradas de pesquisa, manipuladores de redimensionamento e salvamento automático de formulários. Use useThrottle para rolagem e movimento do mouse. Sempre combine chamadas à API com atraso com AbortController para evitar condições de corrida. Mostre o estado de carregamento sempre que inputValue !== debouncedQuery para manter a interface responsiva e informativa.