Først mål, så fiks den virkelige årsaken — ikke sprø useMemo rundt på gjetting.
Bruk React DevTools Profiler (aktivér "Highlight updates when components render"). Det viser hvilke komponenter som ble gjengjengert og hvorfor (props endret seg, state endret seg, overordnet komponent gjengjengert, context endret seg).
1. Nye objekt/array/funksjons-props hver render forhindrer 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-verdi gjenopprettet hver render → alle forbrukere gjengjengir. Memoize value eller del opp contexts.
3. State plassert for høyt. Å senke state slik færre komponenter er avhengige av det, er ofte den største gevinsten:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Kostbar arbeid i render → pakk inn i useMemo.
Gjengjenginger er vanligvis billige — React er raskt. De fleste "optimaliseringer" legger til kompleksitet uten målbar fordel. Foretrekk strukturelle fikser (colocating state, list virtualization for tusenvis av rader) fremfor å spre memos. Optimaliser de spesifikke hotspots som profileren avslører, og mål på nytt for å bekrefte at fiksen faktisk hjalp.