Mäta DOM-element med useLayoutEffect

element.getBoundingClientRect() returnerar ett DOMRect-objekt med elementets storlek och position i förhållande till viewporten: top, right, bottom, left, width och height. Det tvingar webbläsaren att utföra en layoutberäkning för att returnera korrekta värden, så anropa det sparsamt.

Om du läser av getBoundingClientRect() i en useEffect har webbläsaren redan målat. Om du sedan uppdaterar tillståndet utifrån mätningen renderar React om komponenten och webbläsaren målar igen. Användaren kan kortvarigt se elementet på fel position eller med fel storlek innan korrigeringen visas i den andra målningen.

Avläsning av mätvärden i useLayoutEffect sker efter DOM-mutationer men före målning. Alla tillståndsuppdateringar som utlöses av mätningen får React att rendera om synkront och genomföra den korrigerade DOM:en — allt innan webbläsaren har målat något. Användaren ser bara det slutliga, korrekta resultatet i en enda målningscykel.

Ett verktygstips behöver visas nära elementet som utlöser det. Mät det utlösande elementets position i useLayoutEffect med hjälp av getBoundingClientRect(), beräkna verktygstipsets absoluta position och spara positionen i tillståndet. Verktygstipset renderas på rätt plats redan vid den första målningen, utan något synligt hopp från en felaktig ursprunglig position.

För att animera ett element från dess naturliga, obegränsade storlek till en fast storlek måste du känna till den naturliga storleken innan begränsningen tillämpas. Läs av elementets höjd i useLayoutEffect innan någon animeringsstil tillämpas, spara den i tillståndet och använd den sedan som startvärde för keyframen i din CSS-övergång.

När en sida har en sticky header behöver innehållet ha en övre utfyllnad som motsvarar headerns höjd för att undvika att döljas bakom den. Mät headerns höjd i useLayoutEffect med hjälp av en ref: headerRef.current.getBoundingClientRect().height. Ange detta som paddingTop på innehållsbehållaren. Layouten är korrekt redan vid den första renderingen.

När du anropar setState inuti useLayoutEffect kör React omedelbart en ny renderings- och commitcykel i samma synkrona arbetsblock. Denna omrendering kör också komponentens useLayoutEffect. Var försiktig så att du inte skapar en oändlig loop: uppdatera endast tillståndet om det nya mätvärdet skiljer sig från det aktuella tillståndsvärdet.

På servern finns inga DOM-element, så getBoundingClientRect() skulle kasta ett fel eller returnera nollvärden. Skydda din useLayoutEffect med en kontroll: if (typeof window === 'undefined') return;. I SSR-appar kan du behöva hydrera med en platshållarstorlek och mäta efter hydreringen på klienten.

En engångsmätning med useLayoutEffect ger dig storleken vid montering. Om du vill följa storleksändringar när elementet ändrar storlek på grund av fönsterändringar, dynamiskt innehåll eller CSS-ändringar använder du i stället ResizeObserver. Den anropar en callback varje gång elementets storlek ändras, vilket gör den mer lämplig för responsiva komponenter.

Om flera effekter behöver samma mätvärde beräknar du det en gång och delar det via context eller skickar ned det som props. Om samma getBoundingClientRect()-värde beräknas i flera useLayoutEffect-anrop utlöses flera synkrona layoutavläsningar, som var och en är relativt kostsam. Samordna mätningarna när det är möjligt.

Refs fylls i innan effekter körs. När useLayoutEffect körs är det garanterat att ref.current pekar på DOM-elementet. Därför fungerar mönstret: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). En ref är aldrig null inuti en layouteffekt på en monterad komponent.

Använd getBoundingClientRect() i useLayoutEffect för att läsa av DOM-mätningar efter mutationer men före målning. Tillståndsuppdateringar från dessa mätningar orsakar en synkron omrendering som inkluderas i samma målning och förhindrar flimmer. Skydda mot SSR med en kontroll av typeof window. För löpande storleksövervakning bör du använda ResizeObserver.