Quando React parla di re-render, intende tre cose
Quando chiami setState, React non si limita ad aggiornare il DOM. Esegue tre fasi separate in sequenza. La maggior parte degli sviluppatori confonde queste fasi. Capire la differenza ti aiuta a risolvere i problemi di performance.
Le tre fasi:
• Render: React chiama la funzione del tuo componente. • Reconcile: React confronta il nuovo output con quello precedente. • Commit: React applica le modifiche al DOM.
- La fase di Render
React esegue la tua funzione. Utilizza le props correnti. La funzione restituisce JSX. Questo JSX è solo un elenco di oggetti JavaScript. La gente lo chiama virtual DOM. Non è un DOM reale. È una descrizione di come dovrebbe apparire l'interfaccia utente. Nulla appare ancora sullo schermo. Questa fase è pura matematica e logica.
- La fase di Reconcile
React mantiene l'albero vecchio e quello nuovo. Cerca le differenze tra i due. Se il tipo di un elemento cambia, React sostituisce l'intero albero. Se cambiano solo le props, React le aggiorna. È qui che le keys sono importanti. Le keys aiutano React a far corrispondere gli elementi di una lista tramite l'identità invece che la posizione. Questa fase crea un elenco dei passaggi minimi necessari per aggiornare il DOM.
- La fase di Commit
React prende l'elenco delle modifiche e interagisce con il DOM reale. Crea nuovi nodi e rimuove quelli vecchi. È in questo momento che gli utenti vedono le modifiche sullo schermo. Dopo questo, il browser effettua il paint dello schermo. Successivamente, viene eseguito useEffect.
Errori comuni:
• Un re-render non sempre modifica il DOM. Se l'output è lo stesso, React non fa nulla nella fase di commit. • React.memo salta la chiamata alla funzione. Non salta l'aggiornamento del DOM. • Le props non innescano i re-render. Il re-render di un componente genitore innesca quello del figlio. Il cambiamento della prop è solo una conseguenza.
Come risolvere i problemi di performance:
Se la tua funzione è lenta, hai un problema di Render. Sposta i compiti pesanti fuori dalla funzione o usa la memoizzazione.
Se React ricostruisce liste enormi, hai un problema di Reconcile. Controlla le tue keys.
Se il DOM si aggiorna troppo, hai un problema di Commit. Usa la virtualizzazione o cambia la tua struttura.
React 19 e il React Compiler ora gestiscono gran parte di questo lavoro per te. Ma conoscere queste fasi ti aiuta a fare debugging in modo migliore.