Meet eerst af, en fix dan de echte oorzaak — strooi niet gokjes useMemo overal uit.
Gebruik de React DevTools Profiler (schakel "Highlight updates when components render" in). Het toont welke componenten opnieuw zijn gerenderd en waarom (props veranderd, state veranderd, parent gerenderd, context veranderd).
1. Nieuwe object/array/function props elk render verslaan 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 value opnieuw gemaakt elk render → alle consumers renderen opnieuw. Memoize de value of splits contexts.
3. State te hoog geplaatst. State verlagen zodat minder componenten ervan afhankelijk zijn, is vaak de grootste winst:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Duur werk in render → wrap in useMemo.
Re-renders zijn meestal goedkoop — React is snel. De meeste "optimalisaties" voegen complexiteit toe zonder meetbaar voordeel. Prefereer structurele fixes (state coloceren, list virtualisatie voor duizenden rijen) boven memos verspreiden. Optimaliseer de specifieke hotspots die de profiler onthult, en meet opnieuw om te bevestigen dat de fix echt hielp.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren