Nejdřív změřte, pak opravte skutečnou příčinu — nerozmisťujte useMemo všude na základě hádání.
Využijte React DevTools Profiler (zapněte "Highlight updates when components render"). Ukazuje, které komponenty se znovu vyrenderovaly a proč (props se změnily, state se změnil, родительská komponenta se vyrendrovala, context se změnil).
1. Nové props object/array/function v každém renderu porušují 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. Hodnota context je vytvořena znovu v každém renderu → všichni spotřebitelé se znovu vyrendrují. Zapamatujte si value nebo rozdělte contexty.
3. State umístěn příliš vysoko. Snížení state tak, aby na něj záviselo méně komponent, je často největší výhra:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Nákladná práce v renderu → zabalte do useMemo.
Re-rendrování je obvykle levné — React je rychlý. Nejvíce "optimalizací" přidává složitost bez měřitelného přínosu. Preferujte strukturální opravy (kolokaace state, list virtualization pro tisíce řádků) místo rozprostření memo všude. Optimalizujte konkrétní hotspoty, které profiler odhalí, a znovu změřte, abyste potvrdili, že oprava skutečně pomohla.