PricingLoginStart free
React Academy · leksjon

Memoisere kontekstverdier med useMemo

Pakk kontekstverdiobjekter inn i useMemo, slik at forbrukere ikke rendres på nytt unødvendig.

Leksjon 2 av 413 trinn

Memoisere kontekstverdier med useMemo er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen lærer De hvorfor kontekstverdiobjekter må memoreres med useMemo, og hvordan De konfigurerer avhengigheter riktig for å unngå unødvendige gjengivelser på nytt.

Problemet med objektreferanser

Hver gang en Provider-komponent gjengis på nytt, opprettes en ny objektliteral `{ ... }` som kontekstverdi — selv om innholdet er det samme. Alle konsumenter gjengis på nytt fordi referansen er endret.
// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Løse problemet med useMemo

Pakk kontekstverdien inn i useMemo, slik at den samme objektreferansen returneres mellom gjengivelser når ingenting i deps-arrayet er endret.
const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

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

Velge avhengigheter nøye

Ta med alle verdier som brukes inne i useMemo, i deps-arrayet. Manglende avhengigheter fører til foreldede verdier. Ta med primitive props, som strenger og tall, samt stabile referanser, for eksempel funksjoner pakket inn i useCallback.

Stabile funksjoner med useCallback

Funksjonsverdier endrer referanse ved hver gjengivelse. Pakk dem inn i useCallback før De inkluderer dem i en useMemo-kontekstverdi, for å forhindre unødvendige gjengivelser på nytt.
const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

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

Når memoisering er unødvendig

Hvis Provider-komponenten aldri gjengis på nytt, for eksempel fordi den ligger helt øverst i treet og den overordnede komponenten aldri endres, medfører useMemo ekstra kostnad uten noen fordel. Memoiser bare når Provider-komponenten selv gjengis på nytt.

Primitive verdier er allerede stabile

Hvis kontekstverdien er en primitiv verdi, som en streng, et tall eller en boolsk verdi, trenger De IKKE useMemo — primitive verdier sammenlignes etter verdi, ikke referanse. `value={isDark}` fører ikke til ekstra gjengivelser på nytt.
// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Profilere effekten av memoisering

Bruk React DevTools Profiler for å bekrefte at innpakking av kontekstverdien i useMemo faktisk reduserer antallet gjengivelser på nytt. Registrer en økt før og etter for å se forskjellen i antallet commits.

Nøstede memorerte kontekster

Når flere kontekster er nøstet, bør De memoisere hver av dem uavhengig. Endringer i én kontekst påvirker ikke den memorerte verdien i en annen.

Mønsteret med Provider-komponenten

Kapsle konteksten, tilstanden og memoiseringen inn i en dedikert Provider-komponent. Eksporter en egendefinert hook for å bruke konteksten. Dette er det kanoniske mønsteret for gjenbrukbare 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);

Kort kontroll

Hva er hovedgrunnen til å pakke et kontekstverdiobjekt inn i useMemo?
Besvar den i den interaktive leksjonen

Oppsummering

Pakk kontekstverdiobjekter inn i useMemo med riktige avhengigheter. Stabiliser funksjonsverdier med useCallback. Primitive verdier trenger ikke memoisering. Kapsle kontekstkonfigurasjonen inn i en Provider-komponent med en egendefinert hook.

Neste steg

Neste leksjon: **Mønsteret med kontekstvelgere** — De skal implementere en selector-hook som bare gjengir konsumenter på nytt når en bestemt del av konteksten endres.
Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Memoisere kontekstverdier med useMemo» gratis?

Ja – hele teksten i «Memoisere kontekstverdier med useMemo» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Memoisere kontekstverdier med useMemo»?

Pakk kontekstverdiobjekter inn i useMemo, slik at forbrukere ikke rendres på nytt unødvendig. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Memoisere kontekstverdier med useMemo»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Dele opp kontekster for å begrense nye rendringer
  2. Memoisere kontekstverdier med useMemo
  3. Mønsteret Context Selector
  4. Når du ikke bør bruke Context
← Tilbake til React Academy