0Pricing
React Academy · Lekcja

Zapamiętywanie wartości kontekstu za pomocą useMemo

Opakowanie obiektów wartości kontekstu w useMemo, aby konsumenci nie renderowali się ponownie bez potrzeby.

Zapamiętywanie wartości kontekstu za pomocą useMemo to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Witamy

W tej lekcji dowie się Pani/Pan, dlaczego obiekty wartości kontekstu muszą być memoizowane za pomocą useMemo oraz jak prawidłowo skonfigurować zależności, aby uniknąć niepotrzebnych ponownych renderów.

Problem referencji obiektu

Za każdym razem, gdy komponent Provider renderuje się ponownie, jako wartość kontekstu tworzony jest nowy literał obiektu `{ ... }` — nawet jeśli zawartość pozostaje taka sama. Wszystkie komponenty korzystające z kontekstu renderują się ponownie, ponieważ zmieniła się referencja.
// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Rozwiązanie za pomocą useMemo

Należy opakować wartość kontekstu w useMemo, aby między renderami zwracana była ta sama referencja obiektu, jeśli żadna wartość w tablicy deps się nie zmieniła.
const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

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

Staranne dobieranie zależności

W tablicy deps należy uwzględnić każdą wartość używaną wewnątrz useMemo. Brakujące zależności powodują powstawanie nieaktualnych wartości. Należy uwzględnić propsy prymitywne, takie jak ciągi znaków i liczby, oraz stabilne referencje, takie jak funkcje opakowane w useCallback.

Stabilne funkcje z useCallback

Wartości funkcji zmieniają referencję przy każdym renderowaniu. Przed uwzględnieniem ich w wartości kontekstu używanej przez useMemo należy opakować je w useCallback, aby zapobiec niepotrzebnym ponownym renderom.
const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

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

Kiedy memoizacja jest niepotrzebna

Jeśli komponent Provider nigdy nie renderuje się ponownie, na przykład znajduje się na samej górze drzewa, a jego rodzic nigdy się nie zmienia, useMemo zwiększa narzut bez żadnej korzyści. Memoizację należy stosować tylko wtedy, gdy sam Provider renderuje się ponownie.

Wartości prymitywne są już stabilne

Jeśli wartością kontekstu jest typ prymitywny, taki jak ciąg znaków, liczba lub boolean, NIE trzeba używać useMemo — prymitywy są porównywane według wartości, a nie referencji. `value={isDark}` nie spowoduje dodatkowych ponownych renderów.
// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Profilowanie wpływu memoizacji

Należy użyć profilera React DevTools, aby sprawdzić, czy opakowanie wartości kontekstu w useMemo rzeczywiście ogranicza liczbę ponownych renderów. Należy nagrać sesję przed zmianą i po niej, aby zobaczyć różnicę w liczbie commitów.

Zagnieżdżone memoizowane konteksty

W przypadku zagnieżdżenia wielu kontekstów należy memoizować każdy z nich niezależnie. Zmiany w jednym kontekście nie wpłyną na memoizowaną wartość innego kontekstu.

Wzorzec komponentu Provider

Należy zamknąć kontekst, stan i memoizację w dedykowanym komponencie Provider. Następnie należy wyeksportować własny hook do korzystania z kontekstu. Jest to kanoniczny wzorzec dla kontekstów wielokrotnego użytku.
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);

Szybkie sprawdzenie

Jaki jest główny powód opakowywania obiektu wartości kontekstu w useMemo?

Podsumowanie

Obiekty wartości kontekstu należy opakowywać w useMemo z prawidłową tablicą deps. Wartości funkcji należy stabilizować za pomocą useCallback. Wartości prymitywne nie wymagają memoizacji. Konfigurację kontekstu należy zamknąć w komponencie Provider z własnym hookiem.

Następny temat

Następna lekcja: **Wzorzec selektora kontekstu** — zostanie zaimplementowany hook selektora, który powoduje ponowne renderowanie komponentów korzystających z kontekstu tylko wtedy, gdy zmieni się określony fragment kontekstu.

Często zadawane pytania

Czy lekcja „Zapamiętywanie wartości kontekstu za pomocą useMemo” jest bezpłatna?

Tak — pełny tekst „Zapamiętywanie wartości kontekstu za pomocą useMemo” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zapamiętywanie wartości kontekstu za pomocą useMemo”?

Opakowanie obiektów wartości kontekstu w useMemo, aby konsumenci nie renderowali się ponownie bez potrzeby. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Zapamiętywanie wartości kontekstu za pomocą useMemo”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Dzielenie kontekstów w celu ograniczenia ponownych renderowań
  2. Zapamiętywanie wartości kontekstu za pomocą useMemo
  3. Wzorzec selektora kontekstu
  4. Kiedy nie używać kontekstu
← Powrót do React Academy