State-ændringer udløser gentegning, og dårligt struktureret state kan forårsage meget mere gentegning end nødvendigt — hvilket bremser appen. Nøglestrategier: abonnér snævert, opdel state, memoiser, og hold state lokalt.
store = ();
count = store.;
count = ( s.);
Selektive abonnementer (Zustand/Redux selectors, Jotai atoms) er den eneste største løftestang — komponenter gentegnes kun når deres specifikke slice ændrer sig, ikke ved hver store-opdatering.
// ❌ 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
Memorisering forhindrer børn i at blive gentegnet når deres props (efter reference) ikke er ændret — men det fungerer kun hvis du også holder props/callbacks referentielt stabile (useCallback/useMemo) og opdaterer state immutably.
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.
For meget gentegning er en ledende årsag til langsomme React/state-drevne apps, og det kommer fra hvordan state er struktureret og abonneret på.
Toolkittet — snævre selektive abonnementer, opdelte contexts, memorisering med stabile referencer, immutable opdateringer, og lokalisering af state — kontrollerer direkte gentegningsomfang.
Vigtigst skal du måle (Profiler) for at finde den virkelige flaskehals før optimering, da hensynsløs memorisering tilføjer kompleksitet uden fordel.
Forståelse af hvad der udløser gentegning og hvordan man indeholder det, er essentielt for performante apps i stor skala.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér