Debounce e throttle em inputs: busca rápida sem derrubar a API

Uma pessoa digitando "concessionária" gera 14 eventos de teclado. Se cada um dispara uma busca na API, são 14 requisições em dois segundos — a maioria inútil, e algumas chegando fora de ordem e mostrando resultados errados.

Debounce

Espera a pessoa parar de digitar por um tempo (por exemplo, 300ms) antes de executar. Ideal para buscas, autocompletar e validações.

function debounce<T extends (...a: never[]) => void>(fn: T, ms = 300) {
  let t: ReturnType<typeof setTimeout>
  return (...args: Parameters<T>) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms) }
}

Throttle

Executa no máximo uma vez a cada intervalo, mesmo com eventos contínuos. Ideal para rolagem, redimensionamento de tela e acompanhamento do mouse.

Cuidados que completam a solução

1. 1.Cancele requisições antigas quando uma nova começar (AbortController), para que uma resposta lenta não sobrescreva a mais recente.
2. 2.Mostre que está buscando, com um indicador discreto.
3. 3.Busca mínima: só a partir de dois ou três caracteres.
4. 4.Cache de buscas recentes.

Em React

Para filtros locais, useDeferredValue mantém a digitação fluida enquanto a lista atualiza — ajuda diretamente o INP (INP: o que fazer quando cliques e toques demoram para responder).

Protege a API também

Menos requisições inúteis significa menos chance de bater no limite e receber 429 (Gerenciando o erro 429 Too Many Requests: exponential backoff e retry no cliente, Rate limiting em Node.js: como proteger suas APIs contra sobrecarga e abusos sem afetar a UX).

A busca do blog da We Codex usa essas técnicas. Veja sistemas web ou fale com a gente.