Kiedy używać stanu globalnego, a kiedy lokalnego
Proszę stosować zasadę kolokacji: przechowywać stan jak najbliżej jego odbiorcy i podnosić go tylko wtedy, gdy potrzebuje go wiele niezależnych komponentów.
Kiedy używać stanu globalnego, a kiedy lokalnego to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Kwestia lokalizacji stanu
Każdy fragment stanu ma optymalne miejsce. Wybór niewłaściwej lokalizacji prowadzi albo do uciążliwego przekazywania propsów przez wiele poziomów, albo do niepotrzebnej złożoności globalnego stanu. Zasada przewodnia brzmi: stan należy przechowywać możliwie blisko jego odbiorców.
Lokalny stan komponentu
Jeśli ze stanu korzysta tylko jeden komponent, powinien on znajdować się w jego useState/ref. Nie ma potrzeby udostępniania go — należy pozostawić go lokalnie. To najprostszy i najczęstszy przypadek.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Przenoszenie stanu w górę
Gdy dwa komponenty rodzeństwa potrzebują tego samego stanu, należy przenieść go do ich najbliższego wspólnego przodka. Następnie należy przekazywać go w dół jako propsy i funkcje zwrotne. To standardowe podejście w React/Vue przed sięgnięciem po globalny store.
Współdzielony Context — udostępnianie na średnim poziomie
Gdy stan musi być współdzielony w obrębie poddrzewa bez przekazywania propsów przez wiele poziomów, właściwym narzędziem jest Context (React) lub provide/inject (Vue). To rozwiązanie służy do udostępniania stanu w zakresie umiarkowanej wielkości (strona, moduł funkcjonalności).
Globalny store — stan całej aplikacji
Globalnego store'a (Redux, Zustand, Pinia) należy używać dla stanu, który: 1) jest wykorzystywany przez wiele niezależnych komponentów, 2) musi przetrwać nawigację, 3) ma złożoną logikę aktualizacji, 4) można korzystnie sprawdzać za pomocą DevTools.
Przykłady: stan lokalny
Stan lokalny jest właściwy dla: wartości pól formularza, stanu otwarcia lub zamknięcia podpowiedzi, widoczności modalu, stanu wskazania kursorem, stanu animacji oraz wskaźników ładowania lokalnych dla jednego komponentu.
Przykłady: stan przeniesiony w górę
Stan przeniesiony w górę jest właściwy dla: współdzielonego filtra używanego przez dwie listy rodzeństwa, wybranej karty w grupie kart oraz danych formularza współdzielonych między dwoma krokami.
Przykłady: Context / provide
Context jest właściwy dla: bieżącego motywu, uwierzytelnionego użytkownika, lokalizacji/języka, flag funkcji oraz stosu powiadomień — czyli elementów używanych na wielu poziomach, ale aktualizowanych rzadko.
Przykłady: globalny store
Globalny store jest właściwy dla: koszyka zakupowego, tokenów uwierzytelniania i obiektu użytkownika, kolejki powiadomień (wiadomości pojawiają się w toastach z dowolnego miejsca) oraz danych czasu rzeczywistego wyświetlanych jednocześnie w wielu widokach.
Stan serwera a stan klienta
Dane sieciowe (pobierane z API) stanowią szczególną kategorię: stan serwera. Wymagają obsługi ładowania i błędów, buforowania oraz unieważniania. React Query / SWR / TanStack Query zarządzają stanem serwera, dzięki czemu store może koncentrować się na właściwym stanie klienta.
Częsty błąd: wszystko w globalnym store'ze
Nie należy umieszczać całego stanu w globalnym store'ze „na wszelki wypadek”. Stan lokalny jest tańszy, prostszy i łatwiejszy do testowania. Nadmierne używanie globalnego stanu tworzy zależności między komponentami, które powinny być niezależne.
Schemat podejmowania decyzji
Należy zadać sobie pytania: 1) Czy inne komponenty potrzebują tego stanu? Nie → lokalnie. 2) Czy potrzebują go blisko spokrewnione komponenty rodzeństwa? Tak → przenieść w górę. 3) Czy potrzebuje go poddrzewo komponentów? Tak → context/provide. 4) Czy potrzebuje go wiele niezależnych komponentów albo czy należy go sprawdzać za pomocą DevTools? Tak → globalny store.
Szybkie sprawdzenie
Gdzie należy przechowywać stan otwarcia lub zamknięcia pojedynczego komponentu akordeonu?
Podsumowanie: lokalizacja stanu
Zasada: stan należy przechowywać możliwie blisko jego odbiorców. Lokalny useState/ref służy do stanu jednego komponentu. Stan należy przenosić w górę, gdy ma być współdzielony przez komponenty rodzeństwa. Context/provide służy do udostępniania stanu w poddrzewie. Globalny store jest przeznaczony dla stanu całej aplikacji ze złożonymi aktualizacjami. Stan serwera (dane z API) należy przechowywać w React Query/SWR, a nie w globalnym store'ze.
Ucz się HTML 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
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Kiedy używać stanu globalnego, a kiedy lokalnego” jest bezpłatna?
Tak — pełny tekst „Kiedy używać stanu globalnego, a kiedy lokalnego” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Kiedy używać stanu globalnego, a kiedy lokalnego”?
Proszę stosować zasadę kolokacji: przechowywać stan jak najbliżej jego odbiorcy i podnosić go tylko wtedy, gdy potrzebuje go wiele niezależnych komponentów. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 używać stanu globalnego, a kiedy lokalnego”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Redux Toolkit: createSlice i configureStore
- Zustand do lekkiego zarządzania stanem React
- Pinia dla Vue: defineStore i storeToRefs
- Kiedy używać stanu globalnego, a kiedy lokalnego