useLayoutEffect per le misurazioni pre-animazione

A volte un elemento salta visibilmente o lampeggia al primo rendering prima di stabilizzarsi nella posizione corretta. Di solito accade quando si misura o si riposiziona un elemento dopo che il browser lo ha già disegnato.

L'utente vede la posizione errata per un frame, poi una correzione improvvisa, e il risultato sembra difettoso.

useEffect viene eseguito dopo che il browser ha eseguito il paint. Quindi, se legge una misurazione e aggiorna il DOM all'interno di useEffect, l'utente ha già visto il frame non corretto prima che la modifica venga applicata.

Per il posizionamento visivo che deve risultare invisibile all'utente, l'esecuzione dopo il paint arriva troppo tardi.

useLayoutEffect viene eseguito in modo sincrono dopo che React ha modificato il DOM, ma prima che il browser esegua il paint. Qualsiasi lettura o scrittura del DOM eseguita lì viene applicata prima che l'utente veda anche un solo frame.

Per questo è lo strumento adatto per misurazioni e posizionamenti che devono apparire immediatamente corretti.

All'interno di useLayoutEffect è possibile leggere il layout di un elemento con ref.current.getBoundingClientRect() per acquisirne la posizione e le dimensioni prima di animarlo.

Poiché viene eseguito prima del paint, è possibile sia misurare sia applicare una trasformazione iniziale senza alcun flash visibile.

FLIP è l'acronimo di First, Last, Invert, Play. Si registra la posizione First dell'elemento, lo si lascia spostare nella posizione Last, poi si applica una trasformazione Invert che lo riporta visivamente in First e infine si esegue Play rimuovendo la trasformazione, così anima fino a Last.

Questo consente di animare i cambiamenti di layout usando solo una transform poco costosa, anche se il layout reale è cambiato istantaneamente.

Le letture chiave avvengono in useLayoutEffect: si acquisisce il rettangolo First prima della modifica e il rettangolo Last dopo, quindi si calcola lo scarto. Eseguire tutto prima del paint garantisce che la trasformazione invertita sia applicata prima che venga mostrato qualsiasi elemento.

La differenza tra i due rettangoli fornisce i valori esatti di traslazione e scala necessari per invertire il movimento.

Imposti la trasformazione di inversione in modo sincrono all'interno di useLayoutEffect, poi al frame successivo la rimuova affinché l'elemento animi fino alla sua posizione naturale. Spesso si attiva il passaggio Play con requestAnimationFrame.

Poiché l'inversione è stata applicata prima del paint, l'utente non vede mai l'elemento nella sua posizione Last grezza.

Sul server non esiste il DOM, quindi React registra un'avvertenza secondo cui useLayoutEffect non esegue alcuna operazione durante il rendering lato server. Gli effetti di layout hanno senso solo nel browser.

Questa avvertenza indica che l'effetto non può essere eseguito dove non c'è nulla da misurare.

Se un componente deve essere eseguito sul server, utilizzi useEffect insieme a requestAnimationFrame per effettuare la misurazione prima del paint successivo, oppure utilizzi useLayoutEffect condizionalmente solo nel browser.

Questo evita l'avvertenza, pur consentendo di avvicinarsi alle tempistiche precedenti al paint per le animazioni non critiche.

Un'animazione dell'altezza è un caso classico: in useLayoutEffect si misurano le altezze compressa ed espansa, quindi si anima tra valori espliciti in pixel affinché la transizione sia fluida.

Poiché l'altezza auto non è animabile, misurare prima l'altezza reale consente di passare a un valore concreto.

Per la maggior parte delle attività, scelga per impostazione predefinita useEffect. Utilizzi useLayoutEffect solo quando legge il layout e deve modificare il DOM prima del paint per evitare un flash visibile.

Un uso eccessivo può penalizzare le prestazioni perché blocca il paint finché non termina.

Verifichi la sua comprensione della tempistica degli effetti.

Ha imparato che il problema del flash deriva dalla misurazione dopo il paint, che useLayoutEffect viene eseguito prima del paint e come la tecnica FLIP anima i cambiamenti di layout con trasformazioni poco costose.

Ha anche visto l'avvertenza SSR e un'alternativa con useEffect e requestAnimationFrame.