PricingLoginStart free
React Academy · Lektion

Memoisering af kontekstværdier med useMemo

Pak kontekstværdiobjekter ind i useMemo, så forbrugere ikke genrenderes unødvendigt.

Lektion 2 af 413 trin

Memoisering af kontekstværdier med useMemo er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 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 React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du, hvorfor kontekstværdiobjekter skal memoisere med useMemo, og hvordan du konfigurerer afhængigheder korrekt for at undgå unødvendige rerenderinger.

Problemet med objektreferencer

Hver gang en Provider-komponent rerenderes, oprettes en ny objektliteral `{ ... }` som kontekstværdi — også selvom indholdet er det samme. Alle komponenter, der bruger konteksten, rerenderes, fordi referencen er ændret.
// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Løsning med useMemo

Pak kontekstværdien ind i useMemo, så den samme objektreference returneres mellem rendering'er, når intet i deps-arrayet er ændret.
const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

Vælg afhængigheder omhyggeligt

Medtag alle værdier, der bruges inde i useMemo, i deps-arrayet. Manglende afhængigheder medfører forældede værdier. Medtag primitive props (strenge og tal) samt stabile referencer (funktioner, der er pakket ind i useCallback).

Stabile funktioner med useCallback

Funktionsværdier ændrer reference ved hver rendering. Pak dem ind i useCallback, før du medtager dem i en useMemo-kontekstværdi, for at forhindre unødvendige rerenderinger.
const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

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

Når memoisering er unødvendig

Hvis Provider-komponenten aldrig rerenderes, f.eks. fordi den er helt øverst i træet, og dens forælder aldrig ændres, medfører useMemo ekstra overhead uden nogen fordel. Memoisér kun, når selve Provideren rerenderes.

Primitive værdier er allerede stabile

Hvis din kontekstværdi er primitiv (en streng, et tal eller en boolsk værdi), behøver du IKKE useMemo — primitiver sammenlignes efter værdi, ikke reference. `value={isDark}` medfører ikke ekstra rerenderinger.
// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Profilering af memoiseringens effekt

Brug React DevTools Profiler til at kontrollere, at indpakning af kontekstværdien i useMemo faktisk reducerer antallet af rerenderinger. Optag en session før og efter for at se forskellen i antallet af commits.

Indlejrede memoiserede kontekster

Når flere kontekster er indlejret, skal du memoisere hver af dem uafhængigt. Ændringer i én kontekst påvirker ikke den memoisere værdi i en anden.

Mønsteret med en Provider-komponent

Indkapsl konteksten, tilstanden og memoiseringen i en dedikeret Provider-komponent. Eksportér en brugerdefineret hook til at bruge konteksten. Dette er det kanoniske mønster til genanvendelige kontekster.
export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

Hurtigt tjek

Hvad er den primære grund til at pakke et kontekstværdiobjekt ind i useMemo?
Besvar den i den interaktive lektion

Opsummering

Pak kontekstværdiobjekter ind i useMemo med korrekte deps. Gør funktionsværdier stabile med useCallback. Primitive værdier kræver ikke memoisering. Indkapsl kontekstopsætningen i en Provider-komponent med en brugerdefineret hook.

Næste trin

Næste lektion: **Selector-mønsteret for Context** — du implementerer en selector-hook, der kun rerenderer komponenter, der bruger konteksten, når en bestemt del af konteksten ændres.
Gratis at komme i gang

Lær React 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
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Memoisering af kontekstværdier med useMemo” gratis?

Ja — hele teksten til “Memoisering af kontekstværdier med useMemo” 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 React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Memoisering af kontekstværdier med useMemo”?

Pak kontekstværdiobjekter ind i useMemo, så forbrugere ikke genrenderes unødvendigt. Du øver dig i React 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å React Academy?

Der kræves ingen tidligere erfaring. React 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 2 af 4.

Hvor lang tid tager lektionen “Memoisering af kontekstværdier med useMemo”?

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 React Academy-lektion?

Ja. Alle React 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

  1. Opdeling af kontekster for at begrænse genrenderinger
  2. Memoisering af kontekstværdier med useMemo
  3. Mønsteret Context Selector
  4. Hvornår kontekst ikke bør bruges
← Tilbage til React Academy