Először mérj meg, majd javítsd meg az igazi okot — ne szórd szét a useMemo-t mindenhova találgatásból.
Használd a React DevTools Profiler-t (engedélyezd a "Highlight updates when components render" opciót). Megmutatja, mely komponensek voltak újrarenderelve és miért (a props megváltozott, az state megváltozott, a szülő újrarenderelődött, a kontextus megváltozott).
1. Új object/array/function propok minden renderélésnél győznek a React.memo ellen:
// ❌ 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. A kontextus értéke újra létrehozva minden renderélésnél → az összes fogyasztó újrarenderelődik. Memorizáld a value-t vagy oszd fel a kontextusokat.
3. Az state túl magasan helyezkedik el. Az state lejjebb helyezése, hogy kevesebb komponens függjön tőle, gyakran a legnagyobb siker:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Drága munka a renderelésben → csomagold be a useMemo-ba.
Az újrarenderelések általában olcsók — a React gyors. A legtöbb "optimalizálás" bonyolultságot ad hozzá mérhető haszon nélkül. Előnyben részesítsd a szerkezeti javításokat (az state-et együtt helyezd el, list virtualization ezreknyi sorhoz) a memo-k szétszórása helyett. Optimalizáld az konkrét hotspot-okat, amelyeket a profiler feltár, és mérj meg újra, hogy megerősítsd a javítás valóban segített.