Giorno 5 dell'apprendimento di React: Batching e aggiornamenti funzionali
Pensavo che chiamare più volte un setter dello stato causasse più render.
Mi sbagliavo.
React è più intelligente. Utilizza un processo chiamato Automatic Batching.
Invece di eseguire il render dopo ogni singolo aggiornamento, React li raggruppa. Raccoglie tutti gli aggiornamenti ed esegue un unico render. Questo migliora le prestazioni.
Ecco cosa ho imparato oggi.
Il processo di Batching Quando chiami più funzioni di stato, React segue questo flusso:
- Avvengono più aggiornamenti dello stato.
- React li raggruppa (batching).
- React esegue un unico render.
- React applica le modifiche all'interfaccia utente (UI).
Il problema con gli aggiornamenti standard
Ho provato questo codice:
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
Mi aspettavo che il conteggio passasse da 0 a 3. Invece è passato da 0 a 1.
Questo accade perché setCount(count + 1) non significa "aumenta il conteggio".
Significa "imposta il conteggio su questo valore specifico".
Se count è 0, ogni riga dice a React di impostare il conteggio a 1. React li raggruppa e vede che l'istruzione finale è impostare il conteggio a 1.
La soluzione: Functional Updates Per risolvere il problema, devi usare un aggiornamento funzionale (functional update). Questo utilizza lo stato più recente disponibile nella coda di aggiornamento (update queue).
Il modo corretto:
setCount((prev) => prev + 1);
Quando usi questo pattern, React assegna a ogni aggiornamento il valore più recente.
- Primo aggiornamento: 0 + 1 = 1
- Secondo aggiornamento: 1 + 1 = 2
- Terzo aggiornamento: 2 + 1 = 3
Ora il contatore raggiunge effettivamente 3.
Un errore comune
Una volta ho scritto:
setCount((prev) => { prev + 1 });
Il contatore è diventato undefined.
Quando usi le parentesi graffe in una arrow function, devi usare la parola chiave return.
Usa invece questo:
setCount((prev) => prev + 1);
Punti chiave:
- React raggruppa più aggiornamenti dello stato per migliorare la velocità.
- Le chiamate a
setStatenon sempre innescano render immediati. - Gli aggiornamenti standard utilizzano il valore del ciclo di render corrente.
- Gli aggiornamenti funzionali utilizzano lo stato più recente dalla coda di aggiornamento.
- React utilizza una coda di aggiornamento interna (Update Queue) per gestire queste modifiche.