Først måler du, derefter reparerer du den virkelige årsag — sprinkl ikke useMemo overalt baseret på gæt.
Brug React DevTools Profiler (aktivér "Highlight updates when components render"). Det viser, hvilke komponenter der blev genudgivet og hvorfor (props ændrede sig, state ændrede sig, parent blev udgivet, context ændrede sig).
1. Nye object/array/function props ved hver udgivelse besejrer 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. Context-værdi genoprettes ved hver udgivelse → alle forbrugere genudgives. Memoiser value eller opdel kontekster.
3. State placeret for højt. Sænkning af state, så færre komponenter er afhængige af det, er ofte den største gevinst:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Dyrt arbejde i udgivelse → omslut i useMemo.
Genudgivelser er som regel billige — React er hurtig. De fleste "optimeringer" tilføjer kompleksitet uden målbar fordel. Foretrække strukturelle rettelser (samplacering af state, list virtualization for tusinder af rækker) i stedet for at sprede memos rundt omkring. Optimer de specifikke hotspots, som profiler afsløring, og gen-mål for at bekræfte, at rettelsen faktisk hjalp.