useDebounce corect — varianta pe care o copiez de 3 ani · Hooks & Patterns

Florin Manea · 2026-04-20T16:36:40.238Z

Hook simplu de debounce care funcționează la search-uri, inputuri și auto-save, fără bug-uri.

Postat acum 1 zi

typescript

import { useEffect, useState } from 'react';

export function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

Fiecare proiect începe cu un useDebounce. Iată varianta mea care nu s-a rupt niciodată.

Caracteristici

TypeScript proper
Curățenie cu clearTimeout
Valori stabile (fără re-render inutil)
Testat pe search, auto-save, validare async

Folosire tipică:

Pui const debounced = useDebounce(searchText, 300)
Fetch-ul depinde de debounced, nu de searchText
Gata, nu mai spam-uiești API-ul la fiecare keystroke

useDebounce corect — varianta pe care o copiez de 3 ani

Caracteristici

Răspunsuri 0

Loghează-te pentru a răspunde