useDebounce Hook de Debounce

Última atualização: 2026-11-03

useDebounce Hook de Debounce

useDebounce recebe um valor que muda rapidamente, como o texto de uma caixa de busca, e retorna uma versão estável dele apenas após N milissegundos: se o valor mudar de novo nesse meio-tempo, o temporizador recomeça. Usá-lo para dirigir suas requisições elimina uma grande quantidade de trabalho sem propósito, o que o torna um item básico para busca, autocompletar e tratamento de redimensionamento. O valor que ele retorna fica deliberadamente atrás, e esse atraso é exatamente o que filtra as teclas intermediárias.

Grupo	Padrões de Componentes
Tipo	Hook
Desde	React 16.8

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value)
  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delay)
    return () => clearTimeout(t)   // the value changed again: drop the old timer
  }, [value, delay])
  return debounced
}

⚙️ Parâmetros

value	O valor bruto a ser debounced, geralmente o estado de uma entrada controlada.
delay	O atraso do debounce em milissegundos, 300 por padrão. O novo valor só é retornado depois que o valor ficou quieto por esse tempo.

Retorna：Retorna o valor atrasado e estável: ele permanece inalterado enquanto o valor bruto continua mudando e só alcança o novo valor após uma pausa.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Enquanto você digita rápido, a linha "Debounced" fica parada e só alcança o valor final meio segundo depois que você para — uma requisição dirigida por ela dispara uma vez, com o valor final.

▶ Experimente

💡 Pontos-chave

💡 Dica Use o valor debounced como dependência de um useEffect e a requisição dispara naturalmente uma vez, depois que o valor se assenta.

ℹ️ Informação Debounce espera por quietude, throttle mantém um ritmo: use debounce para sugestões de busca e throttle para rolagem infinita.

⚠️ Aviso O efeito deve limpar o timeout, caso contrário o temporizador antigo continua rodando após o componente desmontar ou o valor mudar de novo.

Mais casos em breve.

📚 Tutoriais Relacionados

Hooks Personalizados

Lição 14: implementando useDebounce e fazendo debounce de requisições reais.

❓ Perguntas Frequentes

P Qual é a diferença entre debounce e throttle?

R Debounce roda uma vez depois que as mudanças param; throttle roda em intervalo fixo. Entrada de busca quer debounce; rolagem e arraste querem throttle.

P Quão longo deve ser o atraso?

R 300 a 500 milissegundos é a faixa comum para busca; vá mais baixo quando a resposta precisa parecer instantânea e mais alto quando o custo do servidor é alto, ponderando em relação ao comportamento da API.

P Por que o efeito precisa retornar uma função de limpeza?

R O efeito roda de novo a cada mudança do valor; sem limpar o antigo setTimeout, o valor obsoleto ainda seria escrito e o debounce se quebraria.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós

useDebounce Hook de Debounce

useDebounce Hook de Debounce

📝 Sintaxe

⚙️ Parâmetros

▶ Exemplo

💡 Pontos-chave

🏷️ Mais Padrões de Componentes

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes