Använd useLayoutEffect för mätningar före animering

Ibland hoppar eller flimrar ett element synligt vid den första renderingen innan det hamnar på rätt plats. Det händer vanligtvis när Ni mäter eller flyttar ett element efter att webbläsaren redan har målat det.

Användaren ser fel position under en bildruta och därefter en plötslig korrigering, vilket ser trasigt ut.

useEffect körs efter att webbläsaren har målat. Om Ni därför läser av ett mått och uppdaterar DOM-trädet i useEffect har användaren redan sett den okorrigerade bildrutan innan ändringen tillämpas.

För visuell positionering som måste vara osynlig för användaren är tidpunkten efter målningen för sen.

useLayoutEffect körs synkront efter att React har ändrat DOM-trädet men innan webbläsaren målar. Alla DOM-avläsningar eller DOM-skrivningar som Ni gör där verkställs innan användaren ser en enda bildruta.

Därför är det rätt verktyg för mått och positionering som måste se korrekta ut direkt.

I useLayoutEffect kan Ni läsa av ett elements layout med ref.current.getBoundingClientRect() för att fånga dess position och storlek innan Ni animerar det.

Eftersom detta körs före målningen kan Ni både mäta och tillämpa en starttransformering utan något synligt flimmer.

FLIP står för First, Last, Invert, Play. Ni registrerar elementets första position (First), låter det flyttas till sin sista position (Last), inverterar sedan genom att tillämpa en transformering som visuellt placerar det tillbaka vid First och spelar slutligen upp animeringen genom att ta bort transformeringen, så att det animeras till Last.

På så sätt kan Ni animera layoutändringar med endast den billiga egenskapen transform, även om den verkliga layouten ändrades direkt.

De viktiga avläsningarna görs i useLayoutEffect: fånga First-rektangeln före ändringen och Last-rektangeln efteråt, och beräkna sedan skillnaden. När detta görs före målningen garanteras att den inverterade transformeringen finns på plats innan något visas.

Skillnaden mellan de två rektanglarna ger Er den exakta förflyttningen och skalningen som behövs för inverteringen.

Ni anger den inverterande transformeringen synkront i useLayoutEffect och tar sedan bort den i nästa bildruta, så att elementet animeras till sin naturliga position. Ofta utlöser Ni uppspelningssteget med requestAnimationFrame.

Eftersom inverteringen tillämpades före målningen ser användaren aldrig elementet på sin oförändrade Last-position.

På servern finns ingen DOM, så React loggar en varning om att useLayoutEffect inte gör något under serverrendering. Layouteffekter är bara meningsfulla i webbläsaren.

Varningen visar att effekten inte kan köras när det inte finns något att mäta.

Om en komponent måste köras på servern kan Ni använda useEffect tillsammans med requestAnimationFrame för att göra mätningen före nästa målning, eller använda useLayoutEffect villkorligt endast i webbläsaren.

Detta undviker varningen och ger samtidigt nästan samma tidpunkt som före målningen för icke-kritiska animeringar.

En höjdanimering är ett klassiskt fall: mät den hopfällda och den expanderade höjden i useLayoutEffect och animera sedan mellan uttryckliga pixelvärden så att övergången blir mjuk.

Eftersom höjden auto inte kan animeras kan Ni genom att först mäta den verkliga höjden övergå till ett konkret tal.

Använd som standard useEffect för det mesta. Använd useLayoutEffect endast när Ni läser av layouten och måste ändra DOM-trädet före målningen för att undvika ett synligt flimmer.

Överanvändning kan försämra prestandan eftersom målningen blockeras tills effekten är klar.

Ni har lärt Er att flimret orsakas av mätning efter målningen, att useLayoutEffect körs före målningen och hur FLIP-tekniken animerar layoutändringar med billiga transformeringar.

Ni har också sett SSR-varningen och ett alternativ med useEffect plus requestAnimationFrame.