Quando viene eseguito useLayoutEffect rispetto a useEffect

useLayoutEffect viene eseguito in modo sincrono subito dopo che React ha applicato le mutazioni al DOM, ma prima che il browser abbia la possibilità di eseguire il paint di tali modifiche. Dal punto di vista del browser, l'effetto di layout e le mutazioni del DOM fanno parte dello stesso blocco di lavoro sincrono e ininterrotto.

useEffect viene eseguito in modo asincrono dopo che il browser ha completato il paint. L'utente visualizza prima l'interfaccia aggiornata e poi viene eseguito l'effetto. Questo rende useEffect meno invasivo per le prestazioni del rendering, ma significa che qualsiasi modifica visibile causata dall'effetto comporterà un secondo ciclo di paint.

Può verificare la differenza di tempistica registrando i timestamp in entrambi gli effetti: aggiunga console.log('layout', Date.now()) in useLayoutEffect e console.log('passive', Date.now()) in useEffect. Nella console, il timestamp dell'effetto di layout sarà sempre precedente a quello dell'effetto passivo, confermando l'ordine di esecuzione.

Se un useEffect aggiorna lo stato che influisce sull'output visivo, l'utente vede due rendering: il rendering iniziale con lo stato obsoleto, seguito dal rendering corretto dopo l'esecuzione dell'effetto. Questo si manifesta come uno sfarfallio visibile o un ricalcolo del layout. useLayoutEffect lo impedisce perché i suoi aggiornamenti di stato vengono applicati prima che il browser esegua qualsiasi paint.

Se chiama setState all'interno di un useLayoutEffect, React esegue immediatamente un altro ciclo di rendering e commit prima del paint. Il browser esegue il paint solo del risultato finale: l'utente non vede mai lo stato intermedio. Questo è il principale caso d'uso di useLayoutEffect: misurare il DOM, calcolare un nuovo valore, aggiornare lo stato e garantire un unico paint senza artefatti.

Poiché useLayoutEffect viene eseguito in modo sincrono prima del paint e può causare ulteriori rendering, un uso eccessivo può danneggiare le prestazioni. Se il lavoro sincrono è pesante, impedisce al browser di eseguire il paint, causando scatti visibili. Lo utilizzi solo quando deve impedire uno sfarfallio visivo; per tutto il resto usi useEffect.

In React Strict Mode, solo in sviluppo, sia useLayoutEffect sia useEffect vengono invocati due volte per ogni montaggio. La sequenza è: montaggio, pulizia, nuovo montaggio. Questo aiuta a individuare gli effetti che non eseguono correttamente la pulizia. La doppia invocazione non avviene nelle build di produzione.

La scelta predefinita dovrebbe essere sempre useEffect. Passi a useLayoutEffect solo quando può osservare e riprodurre uno sfarfallio visivo o un problema di layout errato. Un uso eccessivo di useLayoutEffect blocca inutilmente la pipeline di paint del browser e può ridurre le prestazioni percepite.

useLayoutEffect non può essere eseguito sul server perché in un ambiente server non esistono né il DOM né il ciclo di paint del browser. Se viene usato in un componente sottoposto a rendering sul server, React emette un avviso. La soluzione consiste nel saltare condizionalmente l'effetto: verifichi typeof window !== 'undefined' oppure passi a useEffect per il codice compatibile con SSR.

Si chieda: "Questo effetto modifica qualcosa che l'utente vedrà già al primo paint?" Se la risposta è sì, usi useLayoutEffect per impedire uno sfarfallio. Se la risposta è no, ad esempio per il recupero di dati, le sottoscrizioni, l'analisi, la registrazione nei log e la maggior parte degli altri effetti collaterali, usi useEffect. Questo criterio copre la maggior parte dei casi reali.

useLayoutEffect viene eseguito nello stesso blocco sincrono delle mutazioni del DOM. Mentre è in esecuzione un useLayoutEffect, React non può elaborare altro lavoro, come rispondere agli eventi dell'utente. Per questo deve essere rapido e mirato. Il codice sincrono di lunga durata in useLayoutEffect ritarda direttamente il rendering del browser sullo schermo.

Quando viene eseguito esattamente useLayoutEffect rispetto alle mutazioni del DOM e al paint del browser?

useLayoutEffect è sincrono e viene eseguito prima del paint del browser, quindi è adatto per misurare il DOM e correggere gli elementi visivi. useEffect viene eseguito dopo il paint ed è la scelta corretta per il recupero di dati, le sottoscrizioni e la maggior parte degli effetti collaterali. Usi useEffect come impostazione predefinita e passi a useLayoutEffect solo quando uno sfarfallio visivo conferma che è necessario. Eviti di usarlo in SSR senza opportune verifiche.