Cos'è `useEffect` e quando viene eseguito?

Question

Accepted Answer

`useEffect` esegue **effetti collaterali** — lavoro che esce dal rendering di React, come il recupero dei dati, le sottoscrizioni, i timer o gli aggiornamenti DOM manuali. Viene eseguito **dopo** il rendering del componente, mantenendo gli effetti collaterali al di fuori del corpo di rendering (il rendering deve rimanere puro).

## Perché è importante

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → eseguito dopo il primo rendering e ogni volta che `count` cambia.
- **`[]`** (vuoto) → eseguito **una volta** dopo il montaggio (bene per la configurazione una tantum).
- **omesso** → eseguito dopo **ogni** rendering (raramente quello che vuoi).

## Pulizia: restituire una funzione

Se un effetto configura qualcosa che deve essere smontato, restituisci una funzione di pulizia. React la chiama prima della successiva esecuzione dell'effetto e quando il componente viene smontato:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Perché la pulizia è importante

Senza di essa, ogni ri-esecuzione aggiungerebbe un altro timer/sottoscrizione e non rimuoverebbe mai quello vecchio — una classica perdita di memoria. Il ciclo di vita per un effetto `[dep]` è: *esegui effetto → (dep cambia) → esegui pulizia → esegui effetto di nuovo*.

**Suggerimento:** non usare effetti per cose che puoi calcolare durante il rendering (derivare i valori invece), e includi ogni valore che l'effetto legge nell'array di dipendenze (la regola di lint `react-hooks/exhaustive-deps` aiuta).