useDebounce

Hook que atualiza um valor após um delay em milissegundos. Ideal para inputs de busca, filtros e qualquer state que dispara requisições.

Visão Geral

O useDebounce retorna uma versão atrasada do valor passado — só atualiza após o delay em milissegundos sem mudanças. Cada nova mudança reinicia o timer.

Exemplo de Uso

index.tsx
import { useDebounce } from "@convertcompany/ui/hooks";
import { useEffect, useState } from "react";

export default function SearchBox() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (!debouncedQuery) return;
    fetch(`/api/search?q=${debouncedQuery}`).then(/* ... */);
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Buscar…"
    />
  );
}

O query atualiza imediatamente (responsivo no input), mas o debouncedQuery só muda depois de 300ms parado. O useEffect que dispara a request só roda quando o debounced muda — evita avalanche de requisições.

Assinatura

index.ts
function useDebounce<T>(value: T, delay: number): T;

Props

PropriedadeTipo
valueValor a ser atrasado. Genérico — pode ser qualquer tipo.
T
delayDelay em milissegundos antes de atualizar o valor retornado.
number