Een aangepaste useThrottle-hook implementeren

Debouncen stelt bij elke gebeurtenis eenvoudig een timer opnieuw in. Throttlen moet actief bijhouden wanneer de laatste uitvoering plaatsvond en bepalen of er genoeg tijd is verstreken voor een nieuwe uitvoering. Hiervoor moet een tijdstempel tussen renders worden bewaard, waardoor de implementatie iets ingewikkelder is dan die van debouncen.

De tijdstempel van de laatste uitvoering moet tussen renders blijven bestaan zonder zelf nieuwe renders te veroorzaken, waardoor useRef het juiste hulpmiddel is. Sla de tijdstempel op als const lastRunTime = useRef(Date.now()). In tegenstelling tot state veroorzaakt het bijwerken van een ref geen nieuwe render, zodat de throttlelogica efficiënt wordt uitgevoerd zonder extra cycli.

De hook useThrottle(value, delay) retourneert een gethrottelde versie van de invoerwaarde. Het contract lijkt op dat van useDebounce: accepteer elke waarde en een vertraging in ms en retourneer de gethrottelde waarde. Componenten gebruiken deze hook op dezelfde manier, waardoor het een direct inzetbaar alternatief is voor andere timingsemantiek.

Een frequentiebeperking aan de achterrand werkt de waarde aan het einde van elk interval bij. Wanneer een nieuwe waarde binnenkomt, plan je een setTimeout in voor de resterende intervalduur: delay - (Date.now() - lastRunTime.current). Wanneer de timer afgaat, werk je de status bij en leg je de nieuwe lastRunTime vast. Annuleer eerdere timers in de opruimfunctie.

Een frequentiebeperking aan de voorrand past de eerste waarde onmiddellijk toe en negeert volgende waarden totdat het interval is verstreken. Controleer of Date.now() - lastRunTime.current >= delay; werk de status bij en leg het tijdstip vast als dat zo is. Sla de bijwerking anders over. Zo krijgt de gebruiker direct feedback bij de eerste actie, gevolgd door een wachttijd.

De beste gebruikerservaring combineert vaak beide: reageer onmiddellijk op de eerste gebeurtenis (voorrand) en zorg er vervolgens voor dat de uiteindelijke status na het interval ook wordt toegepast (achterrand). Zo ziet de gebruiker eerst een snelle reactie en wordt de uiteindelijke waarde altijd toegepast nadat de beweging stopt, waardoor een verouderde eindstatus wordt voorkomen.

Bewaar de id van de wachtende time-out in een useRef: const timeoutRef = useRef(null). Roep voordat je een nieuwe time-out plant clearTimeout(timeoutRef.current) aan om een bestaande time-out te annuleren. Hiermee voorkom je meerdere overlappende timers, die meerdere bijwerkingen binnen één interval voor frequentiebeperking zouden veroorzaken.

De opruimfunctie van useEffect moet clearTimeout(timeoutRef.current) aanroepen om een wachtende bijwerking aan de achterrand te annuleren wanneer de component wordt ontkoppeld. Zonder deze opruimactie gaat een wachtende time-out na de ontkoppeling af. Die probeert dan de status van een niet-gemonteerde component in te stellen en kan React-waarschuwingen veroorzaken.

In plaats van een hook op basis van een waarde kun je een hook voor frequentiebeperking op basis van useCallback maken: useThrottledCallback(fn, delay) retourneert een versie van een functie met frequentiebeperking. Dit is flexibeler wanneer je een functieaanroep wilt beperken, zoals die van een analysetracker, in plaats van een reactieve waarde.

Gebruik in Jest-tests jest.useFakeTimers() om de tijd te beheersen. Stel een frequentiebeperking in met een vertraging van 1000 ms, voer 10 snelle waardewijzigingen uit, versnel de neptijd vervolgens met 500 ms en controleer of er slechts 1 of 2 wijzigingen zijn uitgevoerd. Versnel de tijd nog eens met 500 ms en controleer of de bijwerking aan de achterrand wordt uitgevoerd. Zo controleer je het gedrag van de frequentiebeperking op deterministische wijze.

React verwerkt statuswijzigingen tijdens het renderen in batches. Een frequentiebeperking die op statuswijzigingen werkt, past goed binnen dit model. Houd er wel rekening mee dat renderbewerkingen in React 18 Concurrent Mode kunnen worden onderbroken. De logica voor frequentiebeperking zelf, die is gebaseerd op echte verstreken tijd via Date.now(), wordt niet beïnvloed door de planning van React.

Voor frequentiebeperking moet je met useRef het tijdstip van de laatste uitvoering bijhouden. De hook kan de voorrand (onmiddellijk), de achterrand (uitgesteld) of beide implementeren. Bewaar de time-out-id altijd in een ref en annuleer die in de opruimfunctie. Gebruik voor toepassingen met functies bij voorkeur een patroon met useThrottledCallback. Test met neptimers voor betrouwbare resultaten.