Prvo izmjerite, zatim ispravite pravi uzrok — ne rasipajte useMemo posvuda na nagađanju.
Koristite React DevTools Profiler (omogućite "Highlight updates when components render"). Pokazuje koje su se komponente ponovno renderirala i zašto (props su se promijenili, state se promijenio, parent se ponovno renderirao, kontekst se promijenio).
1. Novi object/array/function props pri svakom renderiranju poražavaju 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. Vrijednost konteksta ponovno stvorena pri svakom renderiranju → svi potrošači se ponovno renderiraju. Memorizirajte value ili podijelite kontekste.
3. State smješten previše visoko. Spuštanje state-a tako da manje komponenti ovisi o njemu često je najveća pobijeda:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Skupo računanje pri renderiranju → umotajte u useMemo.
Re-renderi su obično jeftini — React je brz. Većina "optimizacija" dodaje složenost bez mjerljive koristi. Preferirajte strukturne ispravke (lociranje state-a, list virtualization za tisuće redaka) umjesto rasipanja memo-a. Optimizirajte specifične hotspotove koje profiler otkriva, i ponovno izmjerite kako biste potvrdili da je ispravka zaista pomogla.