Hook useState: stan i ponowne renderowanie
Proszę wywoływać useState, aby dodawać stan lokalny do komponentu, aktualizować stan funkcją ustawiającą oraz zrozumieć, kiedy i dlaczego React renderuje ponownie.
Hook useState: stan i ponowne renderowanie to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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.
Czym jest stan
Stan to dane, które zmieniają się w czasie i powinny powodować aktualizację interfejsu, gdy się zmienią. W przeciwieństwie do zwykłych zmiennych zmiany stanu powodują ponowne renderowanie komponentu React z nową wartością.
Składnia useState
useState(initialValue) zwraca krotkę: bieżącą wartość i funkcję ustawiającą. Należy od razu poddać je destrukturyzacji.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // initial value: 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
}TypeScript: określanie typu useState
TypeScript wywnioskuje typ na podstawie wartości początkowej. Gdy wartość początkowa jest niejednoznaczna, na przykład null lub pusta tablica, należy dodać jawny parametr typu.
const [count, setCount] = useState(0); // inferred: number
const [name, setName] = useState(''); // inferred: string
const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicitPonowne renderowanie po zmianie stanu
Wywołanie funkcji ustawiającej planuje ponowne renderowanie. React ponownie wywołuje funkcję komponentu z nową wartością stanu. Zwrócony JSX zastępuje poprzedni wynik renderowania w wirtualnym DOM-ie.
Aktualizacje stanu są asynchroniczne
Aktualizacje stanu są grupowane i stosowane przed następnym renderowaniem, a nie natychmiast. Nie należy odczytywać zaktualizowanego stanu w tym samym module obsługi zdarzenia — nowa wartość będzie dostępna dopiero podczas następnego renderowania.
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
console.log(count); // still 0 — update hasn't applied yet
}Aktualizacje funkcyjne
Gdy nowy stan zależy od poprzedniego stanu, należy użyć funkcyjnej postaci funkcji ustawiającej. Pozwala to uniknąć błędów wynikających z nieaktualnych domknięć.
// Risky (stale closure in async callbacks):
setCount(count + 1);
// Safe (functional update):
setCount(prev => prev + 1);
// Important for buttons that fire rapidly:
function increment() {
setCount(c => c + 1); // always uses the latest value
}Stan zawierający obiekty
Gdy stan jest obiektem, zawsze należy tworzyć nowy obiekt — nie wolno modyfikować istniejącego. React porównuje obiekty na podstawie referencji, więc modyfikacje nie wywołają ponownego renderowania.
const [user, setUser] = useState({ name: 'Alice', age: 30 });
// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!
// CORRECT: new object
setUser({ ...user, age: 31 });Wiele zmiennych stanu
Należy wielokrotnie wywoływać useState dla niezależnych zmiennych stanu. Jest to czytelniejsze niż jeden duży obiekt stanu, gdy wartości nie zmieniają się razem.
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);Leniwa inicjalizacja
Jeśli obliczenie stanu początkowego jest kosztowne, należy przekazać funkcję do useState. Zostanie ona uruchomiona tylko podczas pierwszego renderowania, a nie przy każdym kolejnym renderowaniu.
// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());
// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());Kiedy nie używać stanu
Nie każda zmienna musi być stanem. Wartości wyliczane, takie jak total = items.reduce(…), należy obliczać podczas renderowania, a nie przechowywać w stanie. Stan wyliczany z propsów jest zwykle oznaką nadmiernego komplikowania.
Podnoszenie stanu
Gdy dwa komponenty rodzeństwa muszą współdzielić stan, należy przenieść go do ich wspólnego przodka i przekazywać w dół jako propsy. Jest to podstawowy wzorzec zarządzania stanem w React, zanim sięgnie się po context lub store.
Szybkie sprawdzenie
Dlaczego należy używać funkcyjnej postaci setCount(prev => prev + 1) zamiast setCount(count + 1)?
Podsumowanie: useState
useState zwraca [value, setter]. Wartość początkowa określa typ, ale można też użyć jawnego parametru generycznego. Setter wywołuje ponowne renderowanie. Należy używać aktualizacji funkcyjnych, gdy nowy stan zależy od starego. W przypadku obiektów zawsze należy tworzyć nowe obiekty za pomocą spread, nigdy ich nie modyfikować. Leniwa inicjalizacja służy kosztownym obliczeniom. Stan należy podnosić do wspólnych przodków, gdy komponenty rodzeństwa muszą go współdzielić.
Często zadawane pytania
Czy lekcja „Hook useState: stan i ponowne renderowanie” jest bezpłatna?
Tak — pełny tekst „Hook useState: stan i ponowne renderowanie” 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 „Hook useState: stan i ponowne renderowanie”?
Proszę wywoływać useState, aby dodawać stan lokalny do komponentu, aktualizować stan funkcją ustawiającą oraz zrozumieć, kiedy i dlaczego React renderuje ponownie. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Hook useState: stan i ponowne renderowanie”?
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
- JSX: składnia i transpilacja
- Komponenty funkcyjne i props
- Hook useState: stan i ponowne renderowanie
- Listy, klucze i renderowanie warunkowe