La fase di rendering e il commit nel DOM

Il ciclo di lavoro di React comprende due fasi principali: la fase di rendering e la fase di commit. Durante la fase di rendering, React chiama le funzioni dei componenti e costruisce una rappresentazione virtuale dell'interfaccia utente (l'albero Fiber). Durante la fase di commit, React applica le modifiche dell'albero Fiber al DOM reale.

In Concurrent Mode di React 18, la fase di rendering può essere messa in pausa, interrotta o riavviata. React può chiamare più volte la funzione del componente prima di eseguire qualsiasi commit. Per questo le funzioni dei componenti devono essere pure: non possono avere effetti collaterali, perché la funzione potrebbe essere eseguita più di una volta per ogni aggiornamento visibile.

A differenza della fase di rendering, la fase di commit è sempre sincrona e viene eseguita fino al completamento. React non può essere interrotto mentre applica le modifiche al DOM. In questo modo il DOM non viene mai lasciato in uno stato parzialmente aggiornato. Dopo ogni commit, l'utente vede sempre un'interfaccia completamente coerente.

La fase di commit comprende tre sottofasi: prima della mutazione (qui viene eseguito getSnapshotBeforeUpdate dei componenti di classe, per leggere i valori del DOM prima delle modifiche), mutazione (React inserisce, aggiorna e rimuove i nodi del DOM) e layout (qui vengono eseguiti gli effetti sincroni, nello specifico useLayoutEffect e componentDidMount/componentDidUpdate dei componenti di classe).

useEffect è un effetto passivo, ovvero non viene eseguito durante la fase di commit. Dopo il completamento della fase di commit e il rendering da parte del browser, React pianifica gli effetti passivi in modo asincrono. Questi vengono eseguiti dopo che il browser ha avuto la possibilità di visualizzare sullo schermo il DOM aggiornato.

Il browser esegue il rendering tra la fase di layout, in cui viene eseguito useLayoutEffect, e la fase degli effetti passivi, in cui viene eseguito useEffect. Questa è la differenza fondamentale nelle tempistiche: useLayoutEffect viene eseguito prima del rendering del browser, mentre useEffect viene eseguito dopo. Per gli effetti che modificano l'output visivo, questa distinzione è molto importante.

Se un useEffect legge il DOM e aggiorna lo stato (ad esempio, misurando un elemento e impostando uno stato per le sue dimensioni), React esegue nuovamente il rendering e il commit. Il browser esegue il rendering due volte: una volta con le dimensioni iniziali e una volta con quelle corrette. L'utente potrebbe vedere per un attimo le dimensioni errate prima che compaia la correzione.

React costruisce internamente un albero di nodi "fiber", uno per ogni istanza di componente. Ogni fiber contiene lo stato, gli effetti e l'output del componente. Durante la fase di rendering, React crea un nuovo albero di fiber work-in-progress. Durante la fase di commit, l'albero work-in-progress diventa l'albero corrente e quello precedente viene riciclato.

In sviluppo, React Strict Mode richiama intenzionalmente due volte le funzioni dei componenti e gli effetti per aiutare a individuare gli effetti collaterali. Sia useLayoutEffect sia useEffect vengono montati, smontati e montati nuovamente. Questa doppia invocazione non avviene in produzione. Serve a portare alla luce i bug causati da effetti che non vengono ripuliti correttamente.

Poiché la fase di rendering può essere interrotta e rieseguita, le funzioni dei componenti devono produrre lo stesso output a parità di input, senza effetti collaterali. Le mutazioni, le sottoscrizioni e le chiamate API presenti nel corpo della funzione, ma non negli effetti, verranno eseguite più volte del previsto in Concurrent Mode, causando bug.

Non legga mai direttamente le proprietà del DOM all'interno del corpo della funzione del componente. Il DOM potrebbe non esistere ancora, nel caso del rendering sul server, oppure potrebbe non essere aggiornato, durante i nuovi rendering. Legga sempre il DOM all'interno di useLayoutEffect, per le letture prima del paint, oppure di useEffect, per le letture dopo il paint, dove il DOM è sicuramente aggiornato.

In quale sottofase della fase di commit di React viene eseguito useLayoutEffect?

La fase di rendering di React costruisce l'albero dei fiber e può essere interrotta; la fase di commit applica le modifiche al DOM ed è sempre sincrona. Il commit comprende tre sottofasi: prima della mutazione, mutazione e layout. useLayoutEffect viene eseguito nella fase di layout, prima del paint. useEffect viene eseguito come effetto passivo dopo il paint.