Funzionamento Interno di React e Ottimizzazione delle Performance

Introduzione

Comprendere come React funziona dietro le quinte è fondamentale per scrivere codice corretto e ottimizzato. Questo articolo esplora i meccanismi interni di React: come vengono eseguite le funzioni dei componenti, come React aggiorna il DOM utilizzando il Virtual DOM, come viene gestito lo scheduling e il batching degli aggiornamenti dello state, e come funzionano strumenti come memo, useMemo e useCallback.

Come React Esegue i Componenti

Quando si sviluppa con React, è importante capire esattamente quando e come le funzioni dei componenti vengono eseguite. Questa comprensione è la base per ottimizzare le applicazioni e scrivere codice efficiente.

L’Albero dei Componenti

React costruisce un albero dei componenti durante il rendering. Questo albero inizia dal componente radice (tipicamente App) e si espande verso il basso man mano che vengono incontrati altri componenti nel JSX.

Quando React esegue un componente, lo fa dall’alto verso il basso, eseguendo tutto il codice nella funzione del componente:

1. Registrazione dello state: Gli hook useState vengono eseguiti e lo state viene registrato
2. Creazione di funzioni: Le funzioni definite nel componente vengono create (ma non ancora eseguite)
3. Esecuzione del JSX: Il codice JSX viene valutato e quando React incontra un componente personalizzato, esegue anche quella funzione del componente

1
function App() {
2
  console.log('App eseguito');
3
  const [count, setCount] = useState(0);
4

5
  return (
6
    <div>
7
      <Header />
8
      <Counter count={count} />
9
    </div>
10
  );
11
}
12

13
function Header() {
14
  console.log('Header eseguito');
15
  return <h1>My App</h1>;
16
}
17

18
function Counter({ count }) {
19
  console.log('Counter eseguito');
20
  return <p>{count}</p>;
21
}

1
App eseguito
2
Header eseguito
3
Counter eseguito

Re-esecuzione dei Componenti

Quando lo state di un componente cambia, React ri-esegue la funzione del componente. È importante capire che:

• Le ri-esecuzioni non propagano verso l’alto: Se un componente figlio viene ri-eseguito, il componente genitore non viene ri-eseguito automaticamente
• Le ri-esecuzioni propagano verso il basso: Quando un componente viene ri-eseguito, tutti i suoi componenti figli vengono ri-eseguiti a loro volta

Questo comportamento è fondamentale da capire perché significa che cambiare lo state in un componente può causare la ri-esecuzione di molti componenti figli, anche se non hanno bisogno di aggiornarsi.

Strumenti per Analizzare le Esecuzioni

React Developer Tools offre strumenti per analizzare le esecuzioni: il Profiler registra sessioni di interazione, il Flame Graph mostra l’ordine di esecuzione e le relazioni tra componenti, e il Ranked Chart mostra solo i componenti ri-renderizzati.

Prevenire Esecuzioni Non Necessarie con memo

Quando un componente genitore viene ri-eseguito, tutti i suoi figli vengono ri-eseguiti automaticamente, anche se le loro props non sono cambiate. Questo può essere inefficiente se i componenti figli contengono calcoli costosi o molti componenti annidati.

React fornisce la funzione memo per prevenire queste esecuzioni non necessarie.

Come Funziona memo

memo è una funzione di React che avvolge un componente e gli dice di non ri-eseguirsi se le props non sono cambiate:

1
import { memo } from 'react';
2

3
const Counter = memo(function Counter({ initialCount }) {
4
  const [count, setCount] = useState(initialCount);
5

6
  return (
7
    <div>
8
      <p>Count: {count}</p>
9
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
10
    </div>
11
  );
12
});

Quando il componente genitore viene ri-eseguito, memo confronta le vecchie props con le nuove props. Se sono identiche (stesso riferimento in memoria per oggetti/array), il componente non viene ri-eseguito.

1
function App() {
2
  const [enteredNumber, setEnteredNumber] = useState('');
3
  const [chosenCount, setChosenCount] = useState(0);
4

5
  return (
6
    <div>
7
      <input
8
        value={enteredNumber}
9
        onChange={(e) => setEnteredNumber(e.target.value)}
10
      />
11
      <Counter initialCount={chosenCount} />
12
    </div>
13
  );
14
}
15

16
// Senza memo, Counter viene ri-eseguito ad ogni keystroke
17
// Con memo, Counter viene ri-eseguito solo se initialCount cambia
18
const Counter = memo(function Counter({ initialCount }) {
19
  const [count, setCount] = useState(initialCount);
20
  return <p>{count}</p>;
21
});

memo confronta le props usando l’uguaglianza referenziale: per oggetti e array, devono essere lo stesso riferimento in memoria. Se le props sono primitive (stringhe, numeri, booleani), vengono confrontate per valore.

Component Composition come Alternativa

Invece di usare memo, si può isolare lo state che cambia spesso in un componente separato. Questo evita completamente la ri-esecuzione del componente genitore:

1
// Prima: tutto nello stesso componente
2
function App() {
3
  const [enteredNumber, setEnteredNumber] = useState('');
4
  const [chosenCount, setChosenCount] = useState(0);
5

6
  return (
7
    <div>
8
      <input
9
        value={enteredNumber}
10
        onChange={(e) => setEnteredNumber(e.target.value)}
11
      />
12
      <Counter initialCount={chosenCount} />
13
    </div>
14
  );
15
}
16

17
// Dopo: state isolato in un componente separato
18
function ConfigureCounter({ onSet }) {
19
  const [enteredNumber, setEnteredNumber] = useState('');
20

21
  function handleSetClick() {
22
    onSet(parseInt(enteredNumber));
23
  }
24

25
  return (
26
    <section>
27
      <input
28
        value={enteredNumber}
29
        onChange={(e) => setEnteredNumber(e.target.value)}
30
      />
31
      <button onClick={handleSetClick}>Set</button>
32
    </section>
33
  );
34
}
35

36
function App() {
37
  const [chosenCount, setChosenCount] = useState(0);
38

39
  return (
40
    <div>
41
      <ConfigureCounter onSet={setChosenCount} />
42
      <Counter initialCount={chosenCount} />
43
    </div>
44
  );
45
}

Quando si digita nell’input, solo ConfigureCounter viene ri-eseguito perché il suo state cambia. App e Counter non vengono ri-eseguiti perché non hanno state che cambia.

useCallback per Funzioni come Props

Quando si passa una funzione come prop a un componente avvolto con memo, si può incontrare un problema: anche se la funzione fa la stessa cosa, viene ricreata ad ogni render, quindi memo pensa che la prop sia cambiata.

Il Problema

1
const Counter = memo(function Counter({ initialCount, onIncrement }) {
2
  // ...
3
});
4

5
function App() {
6
  const [count, setCount] = useState(0);
7

8
  // Questa funzione viene ricreata ad ogni render!
9
  function handleIncrement() {
10
    setCount(c => c + 1);
11
  }
12

13
  return <Counter initialCount={count} onIncrement={handleIncrement} />;
14
}

Anche se Counter è avvolto con memo, viene comunque ri-eseguito perché handleIncrement è una nuova funzione ad ogni render.

La Soluzione: useCallback

useCallback memorizza una funzione e la ricrea solo se le sue dipendenze cambiano:

1
import { useCallback } from 'react';
2

3
function App() {
4
  const [count, setCount] = useState(0);
5

6
  // Questa funzione viene ricreata solo se le dipendenze cambiano
7
  const handleIncrement = useCallback(() => {
8
    setCount(c => c + 1);
9
  }, []); // Array vuoto = funzione mai ricreata
10

11
  return <Counter initialCount={count} onIncrement={handleIncrement} />;
12
}

1
function App() {
2
  const [count, setCount] = useState(0);
3
  const [multiplier, setMultiplier] = useState(2);
4

5
  // multiplier viene usato nella funzione, quindi va nelle dipendenze
6
  const handleIncrement = useCallback(() => {
7
    setCount(c => c + (1 * multiplier));
8
  }, [multiplier]); // Se multiplier cambia, la funzione viene ricreata
9

10
  return <Counter onIncrement={handleIncrement} />;
11
}

useCallback memorizza la funzione e la ricrea solo quando le dipendenze cambiano. Se le dipendenze sono vuote ([]), la funzione viene creata una sola volta e mai ricreata. Se le dipendenze cambiano, viene creata una nuova funzione con i nuovi valori.

useMemo per Calcoli Costosi

Oltre a prevenire la ri-esecuzione dei componenti, si può anche prevenire l’esecuzione di calcoli costosi all’interno dei componenti utilizzando useMemo.

Il Problema dei Calcoli Ripetuti

1
function Counter({ initialCount }) {
2
  const [count, setCount] = useState(initialCount);
3

4
  // Questa funzione viene eseguita ad ogni render!
5
  function isPrime(n) {
6
    if (n < 2) return false;
7
    for (let i = 2; i < n; i++) {
8
      if (n % i === 0) return false;
9
    }
10
    return true;
11
  }
12

13
  const isInitialCountPrime = isPrime(initialCount);
14

15
  return (
16
    <div>
17
      <p>Count: {count}</p>
18
      {isInitialCountPrime && <p>Initial count is prime!</p>}
19
    </div>
20
  );
21
}

Ogni volta che count cambia, isPrime viene eseguita di nuovo anche se initialCount non è cambiato. Per numeri grandi, questo può essere costoso.

La Soluzione: useMemo

useMemo memorizza il risultato di un calcolo e lo ricalcola solo se le dipendenze cambiano:

1
import { useMemo } from 'react';
2

3
function Counter({ initialCount }) {
4
  const [count, setCount] = useState(initialCount);
5

6
  function isPrime(n) {
7
    if (n < 2) return false;
8
    for (let i = 2; i < n; i++) {
9
      if (n % i === 0) return false;
10
    }
11
    return true;
12
  }
13

14
  // isPrime viene eseguita solo se initialCount cambia
15
  const isInitialCountPrime = useMemo(() => {
16
    return isPrime(initialCount);
17
  }, [initialCount]);
18

19
  return (
20
    <div>
21
      <p>Count: {count}</p>
22
      {isInitialCountPrime && <p>Initial count is prime!</p>}
23
    </div>
24
  );
25
}

Ora isPrime viene eseguita solo quando initialCount cambia, non ad ogni cambio di count.

useMemo memorizza il risultato del calcolo e lo ricalcola solo quando le dipendenze cambiano. Il calcolo viene eseguito durante il render, ma il risultato viene memorizzato e riutilizzato se le dipendenze non cambiano.

Il Virtual DOM e l’Aggiornamento del DOM Reale

Una comprensione fondamentale di come React aggiorna il DOM è essenziale per scrivere codice efficiente. React non aggiorna il DOM direttamente ogni volta che un componente viene ri-eseguito.

Come Funziona il Virtual DOM

React utilizza un meccanismo chiamato Virtual DOM per determinare quali parti del DOM reale devono essere aggiornate:

1. Primo render: React crea un “snapshot” virtuale del DOM che dovrebbe essere renderizzato
2. Confronto: Quando qualcosa cambia, React crea un nuovo snapshot virtuale e lo confronta con quello precedente
3. Aggiornamento minimale: React aggiorna solo gli elementi del DOM reale che sono effettivamente cambiati

1
function Counter() {
2
  const [count, setCount] = useState(0);
3

4
  return (
5
    <div>
6
      <h1>Counter</h1>
7
      <p>Count: <span>{count}</span></p>
8
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
9
    </div>
10
  );
11
}

Il Virtual DOM è importante perché lavorare con il DOM reale è costoso, mentre confrontare oggetti JavaScript in memoria è molto più veloce. React aggiorna il DOM reale solo quando elementi vengono aggiunti/rimossi, il contenuto testuale cambia, o gli attributi cambiano. Se un componente viene ri-eseguito ma produce lo stesso JSX, React non tocca il DOM reale.

State Scoped ai Componenti e per Posizione

Lo state in React è scoped al componente: ogni istanza di un componente ha il proprio state indipendente. Questo è ciò che rende i componenti riutilizzabili.

State Indipendente per Ogni Istanza

1
function Counter({ initialCount }) {
2
  const [count, setCount] = useState(initialCount);
3
  return <p>{count}</p>;
4
}
5

6
function App() {
7
  return (
8
    <div>
9
      <Counter initialCount={0} />
10
      <Counter initialCount={10} />
11
    </div>
12
  );
13
}

Ogni <Counter /> ha il proprio state count indipendente. Cambiare il count del primo non influisce sul secondo.

State Tracciato per Posizione

Tuttavia, lo state è anche tracciato per posizione, non solo per tipo di componente. Questo può causare problemi quando si hanno liste dinamiche di componenti dello stesso tipo.

1
function HistoryItem({ change }) {
2
  const [isSelected, setIsSelected] = useState(false);
3

4
  return (
5
    <li
6
      onClick={() => setIsSelected(!isSelected)}
7
      style={{ backgroundColor: isSelected ? 'yellow' : 'white' }}
8
    >
9
      {change > 0 ? '+' : ''}{change}
10
    </li>
11
  );
12
}
13

14
function CounterHistory({ history }) {
15
  return (
16
    <ul>
17
      {history.map((change, index) => (
18
        <HistoryItem key={index} change={change} />
19
      ))}
20
    </ul>
21
  );
22
}

Keys: Identificare Componenti Unici

Le keys sono il meccanismo di React per identificare univocamente gli elementi in una lista. Risolvono il problema dello state che “salta” e permettono a React di aggiornare il DOM in modo più efficiente.

Perché le Keys sono Importanti

Le keys permettono a React di:

1. Tracciare lo state correttamente: Lo state rimane associato al componente corretto anche quando la lista cambia
2. Aggiornare il DOM efficientemente: React può riutilizzare elementi esistenti invece di ricrearli

Usare Keys Corrette

❌ Non usare l’indice come key (se la lista può cambiare):

1
// Problema: se la lista cambia, le keys non corrispondono più ai contenuti
2
{items.map((item, index) => (
3
  <Item key={index} data={item} />
4
))}

✅ Usare un ID univoco:

1
// Soluzione: ogni item ha un ID univoco che non cambia
2
{items.map((item) => (
3
  <Item key={item.id} data={item} />
4
))}

1
// Struttura dati con ID univoci
2
const changes = [
3
  { id: 1, value: 1 },
4
  { id: 2, value: -1 },
5
  { id: 3, value: 1 }
6
];
7

8
function CounterHistory({ changes }) {
9
  return (
10
    <ul>
11
      {changes.map((change) => (
12
        <HistoryItem
13
          key={change.id}  // ID univoco, non l'indice!
14
          change={change.value}
15
        />
16
      ))}
17
    </ul>
18
  );
19
}

Keys per Resettare Componenti

Le keys possono essere usate anche per forzare React a ricreare un componente quando un valore cambia. Questo è utile quando si vuole resettare lo state di un componente quando una prop cambia.

1
function App() {
2
  const [chosenCount, setChosenCount] = useState(0);
3

4
  return (
5
    <div>
6
      <input
7
        onChange={(e) => setChosenCount(parseInt(e.target.value))}
8
      />
9
      {/* Quando chosenCount cambia, Counter viene completamente ricreato */}
10
      <Counter key={chosenCount} initialCount={chosenCount} />
11
    </div>
12
  );
13
}

Quando chosenCount cambia, React distrugge il vecchio componente Counter e ne crea uno nuovo con lo state resettato. Questo è più efficiente di usare useEffect perché evita una ri-esecuzione extra del componente.

State Scheduling e Batching

React non aggiorna lo state istantaneamente quando si chiama una funzione di aggiornamento. Invece, schedula l’aggiornamento per essere eseguito in seguito. Questo comportamento ha implicazioni importanti.

State Updates sono Asincroni

1
function Counter() {
2
  const [count, setCount] = useState(0);
3

4
  function handleClick() {
5
    setCount(count + 1);
6
    console.log(count); // Stampa ancora 0, non 1!
7
  }
8

9
  return <button onClick={handleClick}>Count: {count}</button>;
10
}

Dopo aver chiamato setCount, count non è ancora aggiornato. L’aggiornamento è schedulato e verrà applicato nel prossimo render.

Usare la Forma Funzionale per State Updates

Quando un aggiornamento dello state dipende dal valore precedente, si deve usare la forma funzionale:

1
function Counter() {
2
  const [count, setCount] = useState(0);
3

4
  function handleClick() {
5
    // ❌ Problema: usa il valore vecchio di count
6
    setCount(count + 1);
7
    setCount(count + 1); // Non funziona come previsto!
8

9
    // ✅ Soluzione: usa la forma funzionale
10
    setCount(c => c + 1);
11
    setCount(c => c + 1); // Ora funziona correttamente!
12
  }
13

14
  return <button onClick={handleClick}>Count: {count}</button>;
15
}

La forma funzionale garantisce che si riceva sempre l’ultimo valore dello state disponibile, anche se ci sono più aggiornamenti schedulati.

1
function App() {
2
  const [count, setCount] = useState(0);
3
  const [multiplier, setMultiplier] = useState(2);
4

5
  function handleComplexUpdate(newValue) {
6
    // Prima aggiorna count
7
    setCount(newValue);
8

9
    // Poi aggiorna count basandosi sul nuovo valore
10
    // Deve usare la forma funzionale per ottenere il valore aggiornato
11
    setCount(c => c * multiplier);
12
  }
13

14
  // Con la forma funzionale, entrambi gli aggiornamenti vengono applicati correttamente
15
  // Prima: count = newValue
16
  // Poi: count = newValue * multiplier
17
}

State Batching

React raggruppa (batches) automaticamente più aggiornamenti dello state che avvengono nella stessa funzione, eseguendo solo un singolo re-render:

1
function App() {
2
  const [count, setCount] = useState(0);
3
  const [name, setName] = useState('');
4

5
  function handleClick() {
6
    setCount(c => c + 1);
7
    setName('New Name');
8
    // Entrambi gli aggiornamenti vengono raggruppati
9
    // Il componente viene ri-eseguito solo una volta, non due!
10
  }
11

12
  return <button onClick={handleClick}>Click me</button>;
13
}

Questo è importante perché significa che chiamare multiple funzioni di aggiornamento dello state nella stessa funzione non causa multiple ri-esecuzioni del componente.

Million.js: Ottimizzazione Esterna

Million.js è una libreria che sostituisce il meccanismo di diffing del Virtual DOM di React con un algoritmo più efficiente. Funziona intercettando il processo di rendering e utilizzando un algoritmo più veloce per determinare quali parti del DOM devono essere aggiornate. L’integrazione avviene a livello di build tool (Vite, Webpack, ecc.) e non richiede modifiche al codice React.

Riepilogo

React costruisce un albero di componenti eseguendo le funzioni dall’alto verso il basso. Quando lo state cambia, il componente viene ri-eseguito insieme a tutti i suoi figli (le ri-esecuzioni propagano verso il basso, non verso l’alto).

React usa il Virtual DOM per confrontare snapshot virtuali e aggiornare solo gli elementi del DOM reale che sono effettivamente cambiati. Anche se un componente viene ri-eseguito, se produce lo stesso JSX, React non tocca il DOM reale.

memo previene la ri-esecuzione confrontando le props, useCallback memorizza funzioni, e useMemo memorizza risultati di calcoli. Le keys identificano univocamente gli elementi nelle liste e permettono a React di tracciare correttamente lo state e aggiornare il DOM in modo efficiente.

Gli aggiornamenti dello state sono asincroni e schedulati. React raggruppa automaticamente multiple aggiornamenti nella stessa funzione. Quando un aggiornamento dipende dal valore precedente, si deve usare la forma funzionale per garantire di ricevere sempre l’ultimo valore disponibile.