Börja med att mäta, sedan åtgärda den verkliga orsaken — sprida inte useMemo överallt på gissning.
Använd React DevTools Profiler (aktivera "Highlight updates when components render"). Det visar vilka komponenter som re-renderades och varför (props ändrades, state ändrades, parent renderade, context ändrades).
förslår :
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
DoneraReact.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 value återskapad varje render → alla consumers re-renderas. Memoize value eller dela upp contexts.
3. State placerad för högt. Att sänka state så färre komponenter är beroende av det är ofta den största vinsten:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Dyr arbete i render → omslut med useMemo.
Re-renders är vanligtvis billiga — React är snabb. De flesta "optimeringar" lägger till komplexitet utan mätbar nytta. Föredra strukturella åtgärder (colocating state, list virtualization för tusentals rader) framför att sprida memos. Optimera de specifika hotspots profiler avslöjar, och mät på nytt för att bekräfta att åtgärden faktiskt hjälpte.