Cum alegi o abordare de gestionare a stării în React?

Question

Accepted Answer

Potrivește unealta la **tipul** de stare, în loc să recurgi automat la un store global. Majoritatea problemelor de "stare globală" sunt de fapt instrument greșit pentru treabă.

## De ce este important

```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)
```

## Cea mai importantă perspectivă: server state ≠ client state

Datele dintr-un API sunt un **cache** al datelor la distanță, nu stare pe care o deții. A le pune în Redux înseamnă că gestionezi manual încărcarea, cache-ul, refetch-ul și invalidarea — dureros și predispus la erori. O bibliotecă de server-state face toate acestea:

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

## Orientări

- Păstrează starea cât mai **locală** posibil; collocate o aproape de locul unde este folosită.
- Nu pune valori care se schimbă rapid în **Context** (redă toți consumatorii).
- Pentru stare de client partajată cu actualizări frecvente, preferă un store cu **selective subscriptions** (Zustand/Jotai) pentru ca componentele să se redea doar pentru slice-ul pe care îl citesc.
- Apelează la Redux Toolkit când ai nevoie de devtools/middleware/structure pentru stare partajată cu adevărat complexă.

Adevărata abilitate este **minimizarea și plasarea corectă** a stării — nu alegerea unei biblioteci.