Tipuri de state și cum alegi
Local, server, URL, formular, global — fiecare cu unealta lui.
Actualizat
Ce este state management
State management = deciziile despre unde ții datele care se schimbă în aplicație, cine le poate citi și cum se actualizează. Într-o aplicație mică, useState ajunge. Când mai multe componente, aflate departe una de alta, au nevoie de aceleași date, apare întrebarea: unde le pun?
Cea mai importantă idee din lecție: nu există un singur „state”. Există mai multe tipuri, iar fiecare are unealta lui. Greșeala clasică e să bagi tot într-un singur store global.
Tipurile de state
| Tip | Exemple | Unealta potrivită |
|---|---|---|
| local UI | modal deschis, tab activ, input | useState, useReducer |
| server state | useri, produse, comenzi | Server Components, TanStack Query, RTK Query |
| URL | filtre, pagină, sortare, căutare | searchParams, useSearchParams |
| formular | valori, erori, pending | <form> + useActionState, React Hook Form |
| global client | coș în SPA, preferințe, userul logat în UI | Context, Zustand, Redux Toolkit |
| persistent local | temă, draft-uri | localStorage + store |
Cum alegi — întrebările, în ordine
Pune întrebările în ordine și oprește-te la primul „da”:
- Vine de pe server? → server state (Server Components, TanStack Query, RTK Query).
- Trebuie să poată fi trimis ca link? → URL.
- Îl folosește o singură componentă? →
useState. - Îl folosesc câteva componente apropiate? → ridici state-ul în părintele comun.
- Îl folosesc multe componente, dar se schimbă rar? → Context.
- E global și se schimbă des? → Zustand sau Redux Toolkit.
Context — ce e și ce nu e
Context transmite o valoare în jos prin arbore, fără props pe fiecare nivel. Nu e un state manager — doar un mecanism de transport.
| Bun pentru | Problematic pentru |
|---|---|
| temă, limbă, userul logat — valori schimbate rar | date schimbate des: fiecare schimbare re-randează toți consumatorii |
| dependency injection (un client API, config) | state mare cu multe câmpuri independente |
Librăriile de state global — comparație
| Context + useReducer | Zustand | Redux Toolkit | Jotai | |
|---|---|---|---|---|
| Model | valoare în arbore | un store, hook cu selector | un store, slice-uri, acțiuni | atomi mici |
| Boilerplate | mic | foarte mic | mediu | mic |
| Re-randări | toți consumatorii | doar ce selectezi | doar ce selectezi | doar atomii folosiți |
| DevTools, time-travel | nu | opțional | excelente | opțional |
| Server state inclus | nu | nu | da — RTK Query | nu |
| Când | valori rare | implicit pentru majoritatea app-urilor | echipe mari, logică complexă, cod existent Redux | state granular, derivat |
Ce s-a schimbat odată cu Next.js App Router
Cu Server Components, mare parte din ce stătea în Redux (liste de produse, profilul userului) se citește direct pe server. State-ul global din client devine mult mai mic — de multe ori doar UI (sidebar deschis, coș, preferințe). Asta e motivul pentru care Zustand și chiar Context ajung adesea.
Pe scurt
- Sunt mai multe tipuri de state; fiecare are unealta lui.
- Server state → cache de server, nu store global; filtre → URL.
- Context = transport pentru valori rare; Zustand implicit pentru global; Redux Toolkit pentru aplicații mari.