Implementera en anpassad useDebounce-hook

Hooken useDebounce tar emot ett värde och en fördröjning i millisekunder och returnerar en debounced-version av värdet: function useDebounce(value, delay). Det returnerade debouncedValue ligger efter det faktiska värdet och uppdateras först när den angivna fördröjningen har gått utan någon ny ändring.

Inuti hooken deklarerar du en tillståndsvariabel: const [debouncedValue, setDebouncedValue] = useState(value). Detta tillstånd innehåller det senast fastställda värdet. Det börjar med samma värde som det ursprungliga värdet och uppdateras först när debounce-timern körs. Komponenter som läser av debouncedValue ser en stabil och färdigbehandlad inmatning.

Kärnlogiken finns i en useEffect: skapa en timer med setTimeout(() => setDebouncedValue(value), delay) och lagra dess ID. Effekten körs varje gång value eller delay ändras. Timern körs delay millisekunder efter den senaste ändringen och uppdaterar det debounced-tillståndet.

Rensningsfunktionen i useEffect anropar clearTimeout(timerId). När value ändras innan timern körs utför React cleanup-funktionen, vilket avbryter den väntande uppdateringen. Därefter schemaläggs en ny timer. Detta är den centrala mekanismen bakom debounce: snabba ändringar återställer timern gång på gång.

Beroendearrayen för useEffect bör innehålla [value, delay]. Effekten körs på nytt varje gång indatavärdet ändras, så att en ny timer schemaläggs, och varje gång delay ändras, ifall anroparen justerar debounce-intervallet dynamiskt. Båda måste tas med för att undvika problem med inaktuella closures.

Användningen är enkel: const debouncedSearch = useDebounce(searchInput, 300). En separat useEffect med [debouncedSearch] som beroende gör API-anropet. Indatatillståndet (searchInput) uppdateras direkt, så att fältet förblir responsivt; det är bara API-anropet som väntar på debounce.

Som standard körs standardimplementationen endast vid trailing edge. För ett "omedelbart" läge, där funktionen anropas vid den första utlösningen men efterföljande anrop debouncas, behöver du en ref för att hålla reda på om anropet har gjorts och återställa den efter timeouten. Detta är mer komplext men användbart för submit-knappar.

Gör hooken generisk för typsäkerhet: function useDebounce(value: T, delay: number): T. Då kan TypeScript härleda typen för debouncedValue från typen för value. Den generiska parametern T förs automatiskt vidare genom det interna tillståndet och returtypen.

Ett vanligt misstag är att glömma att returnera cleanup-funktionen från useEffect. Utan cleanup skapar varje värdeändring en ny timer utan att avbryta den gamla. Resultatet blir att flera timers körs och att setDebouncedValue anropas flera gånger med inaktuella värden, vilket helt motverkar debounce.

Ett alternativ är att lagra själva debounce-funktionen i en useRef med hjälp av lodash. Till skillnad från den tillståndsbaserade metoden debouncar ref-metoden callbacks (funktioner) i stället för värden. Använd den tillståndsbaserade hooken när du behöver ett härlett värde och callback-metoden när du behöver debounca en händelsehanterare.

Verifiera att hooken fungerar genom att lägga till en console-logg i timeout-callbacken och titta i webbläsarens konsol medan du skriver snabbt. Du bör se en logg per "stopp"-händelse, inte en per tangenttryckning. Antalet loggar bör vara mycket mindre än antalet tangenttryckningar när du skriver snabbt.

Hooken useDebounce(value, delay) innehåller ett debounced-tillstånd som uppdateras först efter delay ms av tystnad. Dess useEffect startar en timeout och rensar den i cleanup för att avbryta inaktuella timers. Använd det debounced-värdet som beroende i effekter som hämtar data från API:er. Lägg till en generisk TypeScript-parameter för fullständig typsäkerhet.