React Academy · Lekcja

Kiedy nie używać kontekstu

Rozpoznawanie sytuacji, w których lepiej sprawdzą się przekazywanie propsów, kompozycja lub menedżer stanu.

Lekcja 4 z 413 kroki

Kiedy nie używać kontekstu to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 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, kiedy React Context jest niewłaściwym narzędziem, oraz pozna sytuacje, w których przekazywanie propsów, kompozycja lub menedżer stanu będą lepszym i prostszym rozwiązaniem.

Context nie jest panaceum

Context jest często nadużywany. Deweloperzy sięgają po niego, aby uniknąć przekazywania propsów, ale prowadzi to do ukrytych zależności, utrudnia testowanie komponentów i może pogorszyć wydajność.

Kiedy lepiej używać propsów

Jeśli wartość jest używana przez 1–3 blisko zagnieżdżone komponenty, przekazywanie propsów jest prostsze, bardziej jednoznaczne i łatwiejsze do prześledzenia. Context dodaje kod dostawcy i ukrywa przepływ danych.

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

Kiedy lepsza jest kompozycja

Jeśli trzeba uniknąć przekazywania propsów przez ponad 3 poziomy, najpierw warto wypróbować kompozycję: należy przekazać w propsie kompletnie wyrenderowanego odbiorcę. Context nie jest potrzebny, a przepływ danych pozostaje jednoznaczny.

Context powoduje ukryte sprzężenie

Komponent wywołujący useContext(UserCtx) nie może być ponownie użyty bez opakowania go w UserProvider. Propsy ujawniają zależności — z sygnatury komponentu dokładnie widać, czego on potrzebuje.

Aktualizacje o wysokiej częstotliwości

Nie należy używać Context do wartości zmieniających się wiele razy na sekundę, takich jak pozycja myszy czy postęp animacji. Każda zmiana powoduje ponowne renderowanie wszystkich odbiorców. Zamiast tego należy użyć refs, zewnętrznych store'ów lub biblioteki opartej na sygnałach.

Context nie jest menedżerem stanu

Context jedynie udostępnia wartości — nie oferuje wbudowanego buforowania, narzędzi devtools ani middleware. W przypadku złożonego współdzielonego stanu z częstymi aktualizacjami należy użyć Zustand, Redux lub Jotai, które zostały stworzone do tego celu.

Stan serwerowy nie należy do Context

Dane pobierane z serwera, takie jak lista użytkowników czy posty, nie powinny znajdować się w Context. React Query, SWR lub RTK Query zarządzają stanem serwerowym, oferując buforowanie, odświeżanie w tle i obsługę stanów błędów — Context nie zapewnia żadnej z tych funkcji.

Stan formularza nie należy do Context

Zarządzanie polami formularza za pomocą Context powoduje, że każde naciśnięcie klawisza ponownie renderuje wszystkich odbiorców Context. Zamiast tego należy użyć lokalnego stanu komponentu lub biblioteki do obsługi formularzy, takiej jak React Hook Form.

Kiedy Context JEST właściwym narzędziem

Context idealnie nadaje się do: informacji o bieżącym użytkowniku i stanie uwierzytelnienia, motywu (jasnego/ciemnego), lokalizacji i18n oraz innych stabilnych wartości przekrojowych, które odczytuje wiele komponentów, ale które rzadko się zmieniają.

Szybkie sprawdzenie

Jaki typ danych NAJMNIEJ nadaje się do przechowywania w React Context?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Context należy stosować do stabilnych, przekrojowych wartości, takich jak uwierzytelnienie, motyw i lokalizacja. Przy przekazywaniu na 1–3 poziomy lepiej używać propsów. Aby uniknąć przekazywania propsów przez wiele poziomów, lepiej stosować kompozycję. Do stanu serwerowego należy używać React Query, a do złożonego współdzielonego stanu — Zustand lub Redux.

Kurs ukończony

Gratulacje! Ukończono kurs **React Context Patterns & Performance**. Wiadomo już, jak dzielić Context, zapamiętywać wartości za pomocą memoizacji, stosować selektory oraz — co równie ważne — kiedy w ogóle nie używać Context.

Bezpłatny start

Ucz się React dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 88
Lekcje: 324

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Kiedy nie używać kontekstu” jest bezpłatna?

Tak — pełny tekst „Kiedy nie używać kontekstu” 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 „Kiedy nie używać kontekstu”?

Rozpoznawanie sytuacji, w których lepiej sprawdzą się przekazywanie propsów, kompozycja lub menedżer stanu. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Kiedy nie używać kontekstu”?

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

Dzielenie kontekstów w celu ograniczenia ponownych renderowań
Zapamiętywanie wartości kontekstu za pomocą useMemo
Wzorzec selektora kontekstu
Kiedy nie używać kontekstu

← Powrót do React Academy