Kako odaberete pristup upravljanju stanjem u React-u?

Question

Accepted Answer

Prilagodite alat **vrsti** stanja, umjesto nego što se posežete za globalnom spremištem po zadanom izboru. Većina problema s "globalnim stanjem" zapravo se svodi na pogrešan alat za posao.

## Vodič odlučivanja

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## Najvažnije objašnjenje: stanje servera ≠ stanje klijenta

Podaci s API-ja su **cache** udaljenih podataka, a ne stanje koje posjedujete. Stavljanje u Redux znači da ručno rukovodite učitavanjem, cachiranjem, ponovno dohvaćanjem i nevalidacijom — bolno i sklono greškama. Knjižnica za stanje servera radi sve to:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Smjernice

- Zadržite stanje što je moguće **lokalnije**; smjestite ga blizu mjesta gdje se koristi.
- Ne stavljajte brzo mijenjajuće vrijednosti u **Context** (ponovno renderira sve konzumente).
- Za dijeljeno stanje klijenta sa čestim ažuriranjima, preferite spremište sa **selektivnim pretplatama** (Zustand/Jotai) tako da komponente ponovno render samo za dio koji čitaju.
- Posegnite za Redux Toolkit-om kada vam trebaju njegovi devtools/middleware/struktura na doista složenom dijeljenom stanju.

Prava vještina je **minimiziranje i ispravan raspored** stanja — a ne izbor knjižnice.