Misurare gli elementi del DOM con useLayoutEffect

element.getBoundingClientRect() restituisce un oggetto DOMRect con le dimensioni e la posizione dell'elemento rispetto al viewport: top, right, bottom, left, width e height. Per restituire valori accurati, forza il browser a eseguire un calcolo del layout, quindi lo chiami con parsimonia.

Se legge getBoundingClientRect() in un useEffect, il browser ha già eseguito il paint. Se poi aggiorna lo stato in base alla misurazione, React esegue un nuovo rendering e il browser esegue un altro paint. Gli utenti potrebbero vedere brevemente l'elemento nella posizione o con le dimensioni errate prima che la correzione compaia nel secondo paint.

La lettura delle misurazioni in useLayoutEffect avviene dopo le mutazioni del DOM ma prima del paint. Qualsiasi aggiornamento dello stato attivato dalla misurazione fa sì che React esegua nuovamente il rendering in modo sincrono e applichi il DOM corretto, tutto prima che il browser abbia eseguito il paint. L'utente vede solo il risultato finale corretto in un unico ciclo di paint.

Un tooltip deve apparire vicino all'elemento che lo attiva. Misuri la posizione dell'elemento attivatore in useLayoutEffect usando getBoundingClientRect(), calcoli la posizione assoluta del tooltip e imposti tale posizione nello stato. Il tooltip viene visualizzato nella posizione corretta già al primo paint, senza alcun salto visibile dalla posizione iniziale errata.

Per animare un elemento dalla sua dimensione naturale, non vincolata, a una dimensione fissa, deve conoscere la dimensione naturale prima di applicare il vincolo. Legga l'altezza dell'elemento in useLayoutEffect prima di applicare qualsiasi stile di animazione, la memorizzi nello stato e poi la usi come valore del fotogramma chiave iniziale per la transizione CSS.

Quando una pagina ha un header sticky, il contenuto della pagina deve avere un padding superiore uguale all'altezza dell'header per evitare che venga nascosto dietro di esso. Misuri l'altezza dell'header in useLayoutEffect usando un ref: headerRef.current.getBoundingClientRect().height. Imposti questo valore come paddingTop sul contenitore del contenuto. Il layout è corretto già dal primo rendering.

Quando chiama setState all'interno di useLayoutEffect, React esegue immediatamente un altro ciclo di rendering e commit nello stesso blocco sincrono. Anche questo nuovo rendering esegue il relativo useLayoutEffect. Faccia attenzione a non creare un ciclo infinito: aggiorni lo stato solo se la nuova misurazione è diversa dal valore attuale nello stato.

Sul server gli elementi del DOM non esistono, quindi getBoundingClientRect() causerebbe un errore o restituirebbe zero. Protegga il suo useLayoutEffect con un controllo: if (typeof window === 'undefined') return;. Nelle app SSR potrebbe essere necessario eseguire l'hydration con una dimensione segnaposto e misurare dopo l'hydration sul client.

Una misurazione una tantum con useLayoutEffect fornisce le dimensioni al momento del montaggio. Per monitorare le variazioni delle dimensioni mentre l'elemento cambia dimensione, a causa del ridimensionamento della finestra, del contenuto dinamico o delle modifiche CSS, usi invece ResizeObserver. Questo esegue una callback ogni volta che cambiano le dimensioni dell'elemento, risultando più adatto ai componenti responsivi.

Se più effetti hanno bisogno della stessa misurazione, la calcoli una sola volta e la condivida tramite il context oppure la passi tramite props. Calcolare lo stesso valore di getBoundingClientRect() in più chiamate a useLayoutEffect attiva più letture sincrone del layout, ciascuna relativamente costosa. Quando possibile, raggruppi le misurazioni.

I ref vengono valorizzati prima dell'esecuzione degli effetti. Quando viene eseguito useLayoutEffect, ref.current punta sicuramente all'elemento del DOM. È per questo che il pattern funziona: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). In un componente montato, il ref non è mai null all'interno di un effetto di layout.

Perché è meglio chiamare getBoundingClientRect() in useLayoutEffect invece che in useEffect?

Usi getBoundingClientRect() in useLayoutEffect per leggere le misurazioni del DOM dopo le mutazioni ma prima del paint. Gli aggiornamenti dello stato derivanti da queste misurazioni causano un nuovo rendering sincrono incluso nello stesso paint, impedendo lo sfarfallio. Gestisca l'SSR con un controllo su typeof window. Per monitorare continuamente le dimensioni, preferisca ResizeObserver.