Unajua jinsi gani ya kuchagua njia ya kusimamia hali katika React?

Question

Accepted Answer

Linganisha zana na **aina** ya hali, badala ya kukamatia kiwanda cha kimataifa kwa kawaida. Matatizo mengi ya "hali ya kimataifa" ni kweli zana isiyo sahihi kwa kazi.

## Mwongozo wa uamuzi

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

## Maarifa muhimu zaidi: hali ya seva ≠ hali ya mteja

Data kutoka API ni **cache** ya data ya mbali, si hali unayoimiliki. Kuiweka katika Redux inamaanisha kuendesha upakiaji, caching, kutuma tena, na kufanya batili mwenyewe — hatari na yenye hitilafu. Maktaba wa hali ya seva hufanya yote:

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

## Mwongozo

- Piga hali kama **ndani** iwezekanavyo; iweke karibu na mahali itumiwamo.
- Usiweke thamani zinazobadilika haraka katika **Context** (inacheza tena watumiaji wote).
- Kwa hali ya mteja iliyoshirikiwa na sasisho nyingi, pendelea kiwanda na **msajili wa chaguo** (Zustand/Jotai) ili vipengele vicheza tena tu kwa sehemu wanayoita.
- Kamatia Redux Toolkit unapohitaji devtools/middleware/muundo wake kwenye hali iliyoshirikiwa tata sana.

Mwanzo halisi ni **kupunguza na kuweka vizuri** hali — sio kuchagua maktaba.