React Context vs Zustand: Kiedy używać którego?
Programiści często popełniają jeden błąd w zarządzaniu stanem w React. Używają Contextu w niewłaściwy sposób, a następnie obwiniają go o problemy z wydajnością.
Problemem jest zazwyczaj jeden duży obiekt kontekstu. Gdy wartość w tym obiekcie ulega zmianie, każdy komponent korzystający z tego kontekstu przechodzi re-render. Nawet jeśli komponent potrzebuje tylko małego fragmentu danych, i tak reaguje na każdą zmianę w obiekcie.
Jeśli powiadomienia aktualizują się co 30 sekund, Twój Navbar przechodzi re-render, nawet jeśli interesuje go tylko nazwa użytkownika. To zabija wydajność.
Możesz to naprawić bez użycia biblioteki. Rozdziel konteksty w zależności od tego, jak często ulegają zmianie.
Zamiast jednego dużego kontekstu, użyj kilku: • UserContext dla danych użytkownika • UIContext dla stanu paska bocznego • NotificationContext dla alertów
Teraz Twój Navbar przechodzi re-render tylko wtedy, gdy zmieniają się dane użytkownika. To proste rozdzielenie rozwiązuje większość problemów z wydajnością.
Używaj React Context do stabilnych wartości: • Motywy • Status uwierzytelnienia • Ustawienia języka
Context dobrze współpracuje również z Server Components. Zustand działa tylko po stronie klienta.
Używaj Zustand, gdy potrzebujesz selektywnych subskrypcji. Zustand pozwala komponentom subskrybować konkretne fragmenty (slices) stanu. Jeśli zmieni się jedna część Twojego store, przejdą re-render tylko te komponenty, które obserwują tę konkretną część.
Przy wprowadzaniu nowego stanu kieruj się tą logiką:
Używaj React Context, jeśli: • Dane są stabilne (motyw, uwierzytelnienie, lokalizacja). • Potrzebujesz, aby działało to z SSR lub Server Components. • Chcesz uniknąć prop drillingu poprzez rozdzielenie kontekstów.
Używaj Zustand, jeśli: • Dane zmieniają się często. • Komponenty muszą obserwować konkretne fragmenty stanu. • Twoja logika jest złożona.
Czekaj. Nie używaj żadnego z nich do danych z API. Jeśli pobierasz dane z serwera, użyj TanStack Query. Context i Zustand nie obsługują buforowania ani odświeżania danych w tle.
Podsumowanie: • Jeden duży obiekt kontekstu powoduje re-rendery. Rozdziel go. • Używanie Zustand do stabilnych wartości to przesada. • Używanie Contextu przy częstych zmianach powoduje opóźnienia. • Używanie Zustand do stanu serwera to niewłaściwe narzędzie.