Waarom debounce en throttle belangrijk zijn in UI's

Sommige DOM-gebeurtenissen worden extreem vaak geactiveerd. De gebeurtenis keypress wordt bij elke toetsaanslag geactiveerd. De gebeurtenis scroll wordt tijdens het scrollen tientallen keren per seconde geactiveerd. De gebeurtenis resize wordt voortdurend geactiveerd terwijl de gebruiker de rand van het venster versleept. Elke gebeurtenis afzonderlijk verwerken kan zowel de browser als je server overbelasten.

Als je keypress-handler bij elke toetsaanslag een API-aanroep doet, veroorzaakt een gebruiker die "React hooks" typt (11 tekens) 11 netwerkverzoeken, waarvan de meeste onvolledige zoekopdrachten bevatten. Zo zorgt het bijwerken van een parallaxanimatie bij elke gescrollde pixel voor honderden React-opnieuwrenderingen per seconde. Dit verspilt processorcapaciteit, netwerkverkeer en batterij.

Debouncen stelt de uitvoering uit totdat de gebeurtenis gedurende een bepaalde periode niet meer is geactiveerd. Als de gebruiker nog steeds typt, wordt de timer bij elke toetsaanslag opnieuw ingesteld. Pas na N milliseconden stilte wordt de handler uiteindelijk één keer uitgevoerd. Debouncen beantwoordt de vraag: "voer dit uit nadat de gebruiker klaar is met iets doen".

Throttlen beperkt de uitvoering tot maximaal één keer per tijdsinterval, ongeacht hoeveel gebeurtenissen er worden geactiveerd. Als de gebruiker snel scrollt, zorgt een throttle van 100 ms ervoor dat je handler maximaal 10 keer per seconde wordt uitgevoerd. Throttlen beantwoordt de vraag: "voer dit regelmatig uit, maar niet vaker dan elke N ms".

Debouncen is de juiste keuze wanneer alleen de uiteindelijke waarde telt nadat de gebruiker is gestopt. Klassieke gevallen zijn invoer voor een zoekopdracht (stuur een API-verzoek nadat het typen is gepauzeerd), een handler voor het wijzigen van de venstergrootte (bereken de indeling opnieuw nadat het wijzigen is gestopt) en validatie van een formulierveld die een server controleert (wacht met valideren totdat de volledige invoer beschikbaar is).

Throttlen is de juiste keuze wanneer je regelmatig wilt bijwerken tijdens voortdurende activiteit. Klassieke gevallen zijn een handler voor de scrollpositie (werk een voortgangsbalk voor het lezen of een vastgezette kop maximaal 30 keer per seconde bij), het bijhouden van muisbewegingen (registreer de cursorpositie voor analyses) en handlers voor sleepgebeurtenissen (werk de positie van een versleepbaar element vloeiend bij zonder te veel gebeurtenissen te genereren).

Zelf een debounce of throttle schrijven zonder volledig begrip ervan leidt tot fouten, zoals het missen van de laatste gebeurtenis (aan het einde), activeren aan de verkeerde kant of timers niet opruimen wanneer een component wordt ontkoppeld. Over het algemeen kun je beter grondig geteste implementaties uit bibliotheken zoals lodash gebruiken, omdat die alle randgevallen correct afhandelen.

Lodash biedt _.debounce(fn, wait) en _.throttle(fn, wait) met opties voor gedrag aan het begin en einde van een interval. De geretourneerde functie heeft een methode .cancel() om een geplande aanroep af te breken en een methode .flush() om die onmiddellijk uit te voeren. In React moet je deze functies in useRef opslaan om te voorkomen dat ze bij elke nieuwe render opnieuw worden gemaakt.

Zelfs 50 extra React-opnieuwrenderingen per seconde door een niet-geregelde scroll-handler kunnen aanzienlijk veel processorcapaciteit gebruiken, vooral op mobiele apparaten uit het lagere segment. Een framebudget van 16 ms (60 fps) betekent dat elke nieuwe render in minder dan 16 milliseconden moet zijn voltooid om verloren frames te voorkomen. Debouncen en throttlen zijn je eerste verdedigingslinie tegen problemen met de beeldfrequentie.

Niet voor elke handler met hoge frequentie is debouncen nodig. Als de gebeurtenishandler alleen een waarde uitleest zonder state bij te werken of API's aan te roepen — bijvoorbeeld door de laatste muispositie in een ref op te slaan — is debouncen niet nodig. Debounc of throttle alleen handlers die dure bewerkingen starten: state-updates, API-aanroepen of DOM-metingen.

Wanneer een component wordt ontkoppeld, moet elke geplande gedebouncete aanroep worden geannuleerd om een state-update na het ontkoppelen te voorkomen. Als je een useRef gebruikt om de gedebouncete functie op te slaan, roep je debouncedFn.cancel() aan in de opruimfunctie van useEffect. Gedebouncete functies van Lodash bieden deze methode precies voor dit doel.

Gebeurtenissen met een hoge frequentie, zoals keypress, scroll en resize, kunnen prestatieproblemen veroorzaken als handlers bij elke gebeurtenis worden uitgevoerd. Debouncen wacht op stilte en is het meest geschikt voor zoekvelden en handlers voor het wijzigen van de venstergrootte. Throttlen beperkt de frequentie en is het meest geschikt voor scrollen en slepen. Gebruik Lodash-implementaties die in refs zijn opgeslagen en annuleer ze altijd wanneer een component wordt ontkoppeld.