useLayoutEffect voor metingen vóór animaties

Soms verspringt of flikkert een element zichtbaar bij de eerste weergave voordat het op zijn plaats komt. Dit gebeurt meestal wanneer je een element meet of verplaatst nadat de browser het al heeft getekend.

De gebruiker ziet één beeld lang de verkeerde positie en daarna een plotselinge correctie, waardoor het geheel kapot lijkt.

useEffect wordt uitgevoerd nadat de browser het beeld heeft getekend. Als je dus een meting uitleest en de DOM bijwerkt binnen useEffect, heeft de gebruiker het ongecorrigeerde beeld al gezien voordat je wijziging wordt toegepast.

Voor visuele positionering die voor de gebruiker onzichtbaar moet blijven, komt de timing na het tekenen te laat.

useLayoutEffect wordt synchroon uitgevoerd nadat React de DOM heeft gewijzigd, maar voordat de browser het beeld tekent. Elke DOM-uitlezing of -wijziging die je daar uitvoert, wordt doorgevoerd voordat de gebruiker ook maar één beeld ziet.

Daarom is dit het juiste hulpmiddel voor metingen en positionering die direct correct moeten verschijnen.

Binnen useLayoutEffect kun je de lay-out van een element uitlezen met ref.current.getBoundingClientRect() om de positie en grootte ervan vast te leggen voordat je het animeert.

Omdat dit vóór het tekenen wordt uitgevoerd, kun je zowel meten als een beginnende transformatie toepassen zonder zichtbare flits.

FLIP staat voor eerste positie, laatste positie, omkeren en afspelen. Je legt eerst de eerste positie van het element vast, laat het naar de laatste positie bewegen, keert het vervolgens om door een transformatie toe te passen die het visueel terug naar de eerste positie brengt, en speelt het tot slot af door de transformatie te verwijderen, zodat het naar de laatste positie animeert.

Hiermee kun je veranderingen in de lay-out animeren met alleen de efficiënte eigenschap transform, ook al sprong de echte lay-out direct.

De belangrijkste uitlezingen gebeuren in useLayoutEffect: leg de eerste rechthoek vóór de wijziging vast en de laatste erna, en bereken vervolgens het verschil. Omdat je dit vóór het tekenen doet, weet je zeker dat de omgekeerde transformatie is toegepast voordat er iets wordt getoond.

Het verschil tussen de twee rechthoeken geeft je precies de verplaatsing en schaal die nodig zijn om het geheel om te keren.

Je stelt de omkerende transformatie synchroon in binnen useLayoutEffect en verwijdert deze vervolgens in het volgende beeld, zodat het element naar zijn natuurlijke positie animeert. Vaak start je deze afspeelstap met requestAnimationFrame.

Omdat de omkering vóór het tekenen werd toegepast, ziet de gebruiker het element nooit op zijn onbewerkte laatste positie.

Op de server bestaat geen DOM, dus React geeft een waarschuwing dat useLayoutEffect niets doet tijdens serverweergave. Lay-out-effecten zijn alleen zinvol in de browser.

Deze waarschuwing geeft aan dat het effect niet kan worden uitgevoerd op een plek waar niets te meten valt.

Als een component op de server moet worden uitgevoerd, gebruik je useEffect in combinatie met requestAnimationFrame om vóór de volgende weergave te meten, of gebruik je useLayoutEffect alleen voorwaardelijk in de browser.

Zo voorkom je de waarschuwing en kom je voor niet-kritieke animaties toch dicht bij timing vóór het tekenen.

Een hoogte-animatie is een klassiek voorbeeld: meet de ingeklapte en uitgeklapte hoogtes in useLayoutEffect en animeer vervolgens tussen expliciete pixelwaarden, zodat de overgang vloeiend is.

Omdat de hoogte auto niet kan worden geanimeerd, kun je door eerst de echte hoogte te meten naar een concreet getal overgaan.

Gebruik standaard useEffect voor het meeste werk. Gebruik useLayoutEffect alleen wanneer je de lay-out uitleest en de DOM vóór het tekenen moet wijzigen om een zichtbare flits te voorkomen.

Als je het te vaak gebruikt, kan dat de prestaties schaden omdat het tekenen wordt geblokkeerd totdat het klaar is.

Je hebt geleerd dat het flitsprobleem ontstaat door na het tekenen te meten, dat useLayoutEffect vóór het tekenen wordt uitgevoerd en hoe de FLIP-techniek veranderingen in de lay-out animeert met efficiënte transformaties.

Je hebt ook de SSR-waarschuwing gezien en een terugvaloptie met useEffect en requestAnimationFrame.