Mukautetun useDebounce-hookin toteuttaminen

useDebounce-hook hyväksyy arvon ja viiveen millisekunteina ja palauttaa arvosta debouncetun version: function useDebounce(value, delay). Palautettu debouncedValue tulee todellisen arvon jäljessä ja päivittyy vasta, kun määritetty viive on kulunut ilman uutta muutosta.

Ilmoittakaa hookin sisällä tilamuuttuja: const [debouncedValue, setDebouncedValue] = useState(value). Tämä tila sisältää viimeisimmän vahvistetun arvon. Se alkaa alkuperäisen arvon mukaisena ja päivittyy vasta debounce-ajastimen käynnistyttyä. debouncedValue-arvoa lukevat komponentit näkevät vakaan, asettuneen syötteen.

Ydinlogiikka on useEffect-hookissa: luokaa ajastin komennolla setTimeout(() => setDebouncedValue(value), delay) ja tallentakaa sen tunniste. Effect suoritetaan aina, kun value tai delay muuttuu. Ajastin käynnistyy delay millisekuntia viimeisimmän muutoksen jälkeen ja päivittää debouncetun tilan.

useEffect-hookin cleanup-funktio kutsuu clearTimeout(timerId)-funktiota. Kun value muuttuu ennen ajastimen käynnistymistä, React suorittaa clean­up-funktion ja peruuttaa odottavan päivityksen. Sen jälkeen ajastetaan uusi ajastin. Tämä on debouncen toiminnan keskeinen mekanismi: nopeat muutokset nollaavat ajastimen jatkuvasti.

useEffect-hookin riippuvuustaulukon tulee sisältää [value, delay]. Effect suoritetaan uudelleen aina, kun syötteen arvo muuttuu, jolloin uusi ajastin ajoitetaan, sekä aina, kun delay muuttuu, jos kutsuja säätää debounce-väliä dynaamisesti. Molemmat on sisällytettävä vanhentuneiden sulkeumien ongelmien välttämiseksi.

Käyttö on suoraviivaista: const debouncedSearch = useDebounce(searchInput, 300). Erillinen useEffect-hook, jonka riippuvuutena on [debouncedSearch], käynnistää API-kutsun. Syötteen tila (searchInput) päivittyy heti, joten syöte pysyy responsiivisena; vain API-kutsu odottaa debouncea.

Oletusarvoisesti vakiototeutus suoritetaan vain trailing edge -vaiheessa. Jos haluatte immediate-tilan, joka kutsuu funktiota ensimmäisellä käynnistyskerralla mutta debouncettaa sitä seuraavat kutsut, tarvitsette ref-arvon seuraamaan, onko kutsu jo tehty, ja nollaamaan tiedon aikakatkaisun jälkeen. Tämä on monimutkaisempaa, mutta hyödyllistä lähetyspainikkeissa.

Tehkää hookista geneerinen tyyppiturvallisuuden takaamiseksi: function useDebounce(value: T, delay: number): T. Näin TypeScript voi päätellä debouncedValue-arvon tyypin value-arvon tyypistä. Geneerinen parametri T välittyy automaattisesti sisäiseen tilaan ja palautustyyppiin.

Yleinen virhe on unohtaa palauttaa cleanup-funktio useEffect-hookista. Ilman clean­up-funktiota jokainen arvon muutos luo uuden ajastimen, mutta vanhaa ei koskaan peruuteta. Tämän seurauksena useat ajastimet käynnistyvät ja setDebouncedValue-funktiota kutsutaan useita kertoja vanhentuneilla arvoilla, jolloin debounce ei enää toimi.

Vaihtoehtoisesti debounce-funktion voi tallentaa useRef-hookiin Lodashia käyttäen. Toisin kuin tilapohjainen lähestymistapa, ref-pohjainen lähestymistapa debouncettaa arvojen sijaan callback-funktioita. Käyttäkää tilapohjaista hookia, kun tarvitsette johdetun arvon, ja callback-lähestymistapaa, kun haluatte debouncettaa tapahtumakäsittelijän.

Varmistakaa hookin toiminta lisäämällä console-loki timeout-callbackin sisään ja tarkkailemalla selaimen konsolia samalla, kun kirjoitatte nopeasti. Näette yhden lokimerkinnän jokaista kirjoittamisen "lopettamista" kohden, ette yhtä jokaista näppäimen painallusta kohden. Nopean kirjoittamisen aikana lokimerkintöjä pitäisi olla huomattavasti vähemmän kuin näppäimen painalluksia.

useDebounce(value, delay)-hook ylläpitää debouncettua tilaa, joka päivittyy vasta, kun delay millisekunnin hiljaisuus on kulunut. Sen useEffect asettaa aikakatkaisun ja tyhjentää sen cleanupissa vanhentuneiden ajastinten peruuttamiseksi. Käyttäkää debouncetettua arvoa API-hakuja suorittavien effectien riippuvuutena. Lisätkää TypeScriptin geneerinen tyyppi täyden tyyppiturvallisuuden saavuttamiseksi.