State-wijzigingen triggeren re-renders, en slecht-gestructureerde state kan veel meer re-rendering veroorzaken dan nodig — wat de app vertraagt. De sleutelstrategieën: smal abonneren, state splitsen, memoization, en state lokaal houden.
store = ();
count = store.;
count = ( s.);
Selectieve abonnementen (Zustand/Redux selectors, Jotai atoms) zijn de grootste hefboom — componenten re-renderen alleen als hun specifieke slice verandert, niet bij elke store-update.
// ❌ one big context → every consumer re-renders when anything changes
// ✅ separate contexts so unrelated updates don't cross-trigger
<ThemeContext><UserContext>...</UserContext></ThemeContext>
const Item = React.memo(ItemComponent); // skip re-render if props are unchanged
const expensiveValue = useMemo(() => compute(data), [data]);
const handleClick = useCallback(() => doX(id), [id]); // stable function reference
Memoization voorkomt dat kinderen re-renderen wanneer hun props (per referentie) niet zijn veranderd — maar het werkt alleen als je ook props/callbacks referentieel stabiel houdt (vandaar useCallback/useMemo) en state immutable update.
State high in the tree re-renders everything below it.
Move state DOWN to the smallest component that needs it → smaller re-render scope.
// ❌ a new object/array each render breaks memoization downstream
<Child config={{ a: 1 }} /> // new {} every render
// ✅ stable reference
const config = useMemo(() => ({ a: 1 }), []);
const selectActive = createSelector([s => s.items], items => items.filter(i => i.active));
// returns the SAME reference when items didn't change → no needless re-render
React DevTools Profiler / "why did you render" → find what actually re-renders
before optimizing. Premature memoization adds complexity for no gain.
Excessieve re-renders zijn een voorkomende oorzaak van trage React/state-driven apps, en ze ontstaan door hoe state is gestructureerd en geabonneerd.
De toolkit — smalte selectieve abonnementen, gesplitste contexts, memoization met stabiele referenties, immutable updates, en lokaliseren van state — controleert rechtstreeks de re-render scope.
Belangrijkst is dat je moet meten (Profiler) om de echte bottleneck te vinden voordat je optimaliseert, omdat onvoorzichtige memoization complexiteit toevoegt zonder voordeel.
Begrijpen wat re-renders triggert en hoe je ze in toom houdt, is essentieel voor performante apps op grote schaal.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren