Frontend Academy · Lektion

useMemo og useCallback til ydeevne

Memoizér beregninger, der kræver mange ressourcer, med useMemo, og stabile funktionsreferencer med useCallback for at forhindre unødvendige genrenderinger af child-komponenter.

Lektion 3 af 413 trin

useMemo og useCallback til ydeevne er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

React's standardadfærd

Som standard gengiver React en komponent igen, hver gang dens tilstand eller overordnede komponent gengives igen. Underordnede komponenter gengives også igen, selvom deres props ikke er ændret. For de fleste komponenter er det fint — React er hurtig.

useMemo — memoisér dyre værdier

useMemo(fn, deps) gemmer resultatet af en beregning. Funktionen køres kun, når afhængighederne ændres. Brug den til dyre beregninger, som det ville være spild af ressourcer at gentage ved hver gengivelse.

const expensiveResult = useMemo(() => {
  return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changes

useCallback — memoisér funktioner

useCallback(fn, deps) returnerer en memoiséreret funktion, der bevarer den samme reference, medmindre afhængighederne ændres. Brug den, når callbacks sendes til dybt indlejrede eller memoisérerede komponenter.

const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used

<ItemList items={items} onDelete={handleDelete} />

React.memo — spring genrenderinger over

React.memo(Component) pakker en komponent ind, så den kun gengives igen, når dens props ændres (ved overfladisk sammenligning). Kombinér den med useCallback for stabile callbacks som props.

const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
  console.log('Item rendered:', text); // only logs when props change
  return <li>{text} <button onClick={onDelete}>×</button></li>;
});

// onDelete must be stable (from useCallback) for memo to help

Hvornår du IKKE skal optimere

For tidlig optimering er en fælde. useMemo og useCallback har en omkostning: lukningen og sammenligningen af afhængighederne. Ved billige operationer (filtrering af 10 elementer) opvejer ekstraarbejdet fordelen. Optimér, når du har målt et reelt ydeevneproblem.

Profilér før optimering

Brug React DevTools Profiler til at måle de faktiske gengivelsestider, før du tilføjer memoisering. Profiler viser, hvilke komponenter der tager længst tid, og hvor mange gange de gengives. Ret ud fra målinger, ikke antagelser.

useMemo til stabile referencer

useMemo er også nyttig til at holde en reference stabil — ikke for at forbedre selve beregningens hastighed, men for at forhindre en efterfølgende memo eller effekt i at køre igen unødvendigt.

// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);

// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);

Afhængigheder i useCallback

useCallback følger de samme afhængighedsregler som useEffect. Medtag alle variabler fra det ydre synlighedsområde, som callbacken bruger. Tilstandsopdateringsfunktioner (fra useState) er altid stabile og behøver ikke være med i afhængighederne.

Forholdet mellem useMemo og useCallback

useCallback(fn, deps) svarer til useMemo(() => fn, deps). De bruger den samme mekanisme — useCallback er blot syntaktisk sukker til specifikt at memoisere funktioner.

Memoisering af listeelementer

Et almindeligt mønster er at memoisere komponenter for listeelementer, når listen er stor og gengives ofte. Send stabile callbacks fra useCallback for ikke at omgå memoiseringen.

const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel  = useCallback((id) => remove(id), []);

{rows.map(row => (
  <MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}

Memoisering af kontekstværdier

Memoisér værdien, der sendes til en Context Provider, for at forhindre alle forbrugere i at blive gengivet igen, hver gang Providerens forælder gengives igen.

const value = useMemo(() => ({ user, login, logout }), [user]);

Hurtigt tjek

Hvad er formålet med useCallback?

Besvar den i den interaktive lektion

Opsummering: useMemo og useCallback

useMemo gemmer beregnede værdier, der er dyre at beregne. useCallback gemmer funktionsreferencer. React.memo springer genrenderinger over, når props ikke ændres ved en overfladisk sammenligning. Kombinér alle tre for bedre ydeevne på komponentniveau. Profilér først — for tidlig memoisering tilføjer kompleksitet uden fordel. Stabile referencer forhindrer efterfølgende effekter og memoiseringer i at køre igen.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “useMemo og useCallback til ydeevne” gratis?

Ja — hele teksten til “useMemo og useCallback til ydeevne” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “useMemo og useCallback til ydeevne”?

Memoizér beregninger, der kræver mange ressourcer, med useMemo, og stabile funktionsreferencer med useCallback for at forhindre unødvendige genrenderinger af child-komponenter. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “useMemo og useCallback til ydeevne”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

useContext til global state
useReducer til kompleks state
useMemo og useCallback til ydeevne
Custom hooks: udtræk af genanvendelig logik

← Tilbage til Frontend Academy