Qual è la differenza tra useEffect e useLayoutEffect?

Question

Accepted Answer

Entrambi eseguono effetti, ma in **momenti diversi rispetto al disegno del browser** — e questa differenza di tempismo è il punto centrale.

- **`useEffect`** viene eseguito **dopo** che il browser ha disegnato. È asincrono e non bloccante. Usalo per quasi tutto (dati, sottoscrizioni, logging).
- **`useLayoutEffect`** viene eseguito **sincrono dopo che il DOM è stato mutato ma PRIMA che il browser disegni**. Usalo quando devi leggere il layout e modificare il DOM nello stesso frame per evitare uno sfarfallio visibile.

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## Perché è importante

Immaginati di misurare un elemento e riposizionare un tooltip in base alle sue dimensioni. Con `useEffect`, l'utente vedrebbe brevemente il tooltip nel posto sbagliato, poi salta:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

Con `useEffect`, lo stesso codice viene eseguito dopo il disegno → uno sfarfallio di un frame.

## Perché non dovresti usarlo per impostazione predefinita

- **Blocca il disegno**: il lavoro pesante in `useLayoutEffect` rende l'UI scattante, perché il browser non può disegnare finché non finisce.
- **Avverte durante SSR** (non può essere eseguito sul server, dove non c'è layout).

**Regola pratica:** utilizza `useEffect` per impostazione predefinita; usa `useLayoutEffect` solo per misurazioni DOM/mutazioni sincrone che altrimenti sfoccherebbero.