React Academy · Lektion

Memoisera context-värden med useMemo

Omslut objekt med context-värden i useMemo så att konsumenter inte renderas om i onödan.

Lektion 2 av 413 steg

Memoisera context-värden med useMemo är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen lär ni er varför context-värdeobjekt måste memoisas med useMemo och hur ni konfigurerar beroenden korrekt för att undvika onödiga omrenderingar.

Problemet med objektets referens

Varje gång en Provider-komponent renderas om skapas en ny objektliteral `{ ... }` som context-värde — även om innehållet är detsamma. Alla konsumenter renderas om eftersom referensen har ändrats.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Åtgärda med useMemo

Omslut context-värdet i useMemo så att samma objektreferens returneras mellan renderingar när inget i deps-arrayen har ändrats.

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

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

Välj beroenden med omsorg

Ta med varje värde som används i useMemo i deps-arrayen. Saknade beroenden leder till inaktuella värden. Ta med primitiva props, som strängar och tal, samt stabila referenser, till exempel funktioner som omslutits i useCallback.

Stabila funktioner med useCallback

Funktionsvärden får en ny referens vid varje rendering. Omslut dem i useCallback innan ni tar med dem i ett useMemo-contextvärde för att förhindra onödiga omrenderingar.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

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

När memoisering är onödig

Om Provider-komponenten aldrig renderas om, till exempel om den ligger allra högst upp i trädet och dess parent aldrig ändras, medför useMemo extra kostnad utan någon fördel. Memoisera endast när Provider-komponenten själv renderas om.

Primitiva värden är redan stabila

Om ert context-värde är primitivt, som en sträng, ett tal eller ett booleskt värde, behöver ni INTE useMemo — primitiva värden jämförs efter värde, inte referens. `value={isDark}` orsakar inga extra omrenderingar.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Profilera memoiseringens effekt

Använd React DevTools Profiler för att verifiera att omslutning av context-värdet i useMemo faktiskt minskar antalet omrenderingar. Spela in en session före och efter för att se skillnaden i antal commits.

Kapslade memoisade context

När flera context är kapslade ska ni memoisera varje context separat. Ändringar i ett context påverkar inte det memoisade värdet i ett annat.

Mönstret med Provider-komponenter

Kapsla in context, state och memoisering i en dedikerad Provider-komponent. Exportera en anpassad hook för att använda context. Det här är det etablerade mönstret för återanvändbara context.

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);

Snabb kontroll

Vilket är det främsta skälet till att omsluta ett context-värdeobjekt i useMemo?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Omslut context-värdeobjekt i useMemo med korrekta deps. Stabiliserа funktionsvärden med useCallback. Primitiva värden behöver ingen memoisering. Kapsla in context-konfigurationen i en Provider-komponent med en anpassad hook.

Nästa steg

Nästa lektion: **Mönstret Context Selector** — ni implementerar en selector-hook som renderar om konsumenter endast när en specifik del av context ändras.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Memoisera context-värden med useMemo” gratis?

Ja – hela texten till ”Memoisera context-värden med useMemo” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Memoisera context-värden med useMemo”?

Omslut objekt med context-värden i useMemo så att konsumenter inte renderas om i onödan. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Memoisera context-värden med useMemo”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Dela upp contexts för att begränsa omrenderingar
Memoisera context-värden med useMemo
Mönstret context selector
När context inte bör användas

← Tillbaka till React Academy