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.
1. Abonnér på det minimum, du har brug for
// ❌ subscribing to the whole store → re-renders on ANY change
const store = useStore();
const count = store.count;
// ✅ select only what you use → re-renders only when `count` changes
const count = useStore((s) => s.count);
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.
2. Opdel state / context for at begrænse påvirkningsområde
// ❌ one big context → every consumer re-renders when anything changes
// ✅ separate contexts so unrelated updates don't cross-trigger
<ThemeContext><UserContext>...</UserContext></ThemeContext>
3. Memoiser komponenter og værdier
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.
4. Hold state så lokalt som muligt
State high in the tree re-renders everything below it.
Move state DOWN to the smallest component that needs it → smaller re-render scope.
5. Gem ikke afledte værdier; undgå nye referencer ved hver gentegning
// ❌ a new object/array each render breaks memoization downstream
<Child config={{ a: 1 }} /> // new {} every render
// ✅ stable reference
const config = useMemo(() => ({ a: 1 }), []);
6. Brug memoriserede selectors til afledt data
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
Mål først
React DevTools Profiler / "why did you render" → find what actually re-renders
before optimizing. Premature memoization adds complexity for no gain.
Hvorfor det betyder noget
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.