Innanzitutto misura, poi correggi la causa reale — non spargere useMemo dappertutto a caso.
Usa il React DevTools Profiler (abilita "Highlight updates when components render"). Mostra quali componenti sono state ri-renderizzate e perché (i props sono cambiati, lo state è cambiato, il parent è stato ri-renderizzato, il contesto è cambiato).
1. Nuovi props object/array/function ad ogni render sconfiggono React.memo:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Valore di contesto ricreato ad ogni render → tutti i consumer vengono ri-renderizzati. Memorizza il value o dividi i contesti.
3. State posizionato troppo in alto. Abbassare lo state in modo che meno componenti dipendano da esso è spesso la vittoria più grande:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Lavoro costoso nel render → avvolgi in useMemo.
I re-render sono solitamente economici — React è veloce. La maggior parte delle "ottimizzazioni" aggiunge complessità senza un beneficio misurabile. Preferisci correzioni strutturali (colocazione dello state, virtualizzazione dell'elenco per migliaia di righe) rispetto a spargere memo. Ottimizza gli hotspot specifici che il profiler rivela e ri-misura per confermare che la correzione ha effettivamente aiutato.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona