Unamuaje vipi mahali kila sehemu ya hali inapaswa kuishi?

Question

Accepted Answer

Kuamua **mahali hali inaishi** ni moja ya ujuzi muhimu zaidi wa usanidi. Kanuni inayoongoza: weka kila sehemu ya hali katika **upeo mchepuko** ambao bado unaridhisha kila mtu anayeitaji — na linganisha kila *aina* ya hali na zana sahihi.

## Mfumo wa uamuzi

```text
1. Who needs this state?
   - One component                  → local state (useState)
   - A few related components        → lift to common parent / small context
   - Many distant components         → global store or context

2. What KIND of state is it?
   - Server/remote data              → server-state library (React Query/SWR)
   - UI/client state                 → useState / Zustand / Redux
   - URL-derivable (filters, page)    → the URL (searchParams)
   - Form input                       → form library or local state

3. How OFTEN does it change?
   - Rarely, widely shared (theme)    → Context is fine
   - Frequently, widely shared        → store with selective subscriptions
```

## Kategoria na nyumba zao

```text
State type     Lives in                       Examples
─────────────────────────────────────────────────────────────────
Local UI       component (useState)           input text, isOpen, hover
Shared UI      lifted parent / Context / store modal state, selected item
Server data    React Query / SWR / RTK Query  users, products (cached remote)
URL state      router / searchParams          filters, page, search query, tab
Form state     React Hook Form / local         field values, validation
Global app     Zustand / Redux / Context      auth user, theme, cart
```

## Makosa ya kawaida ambayo mfumo unazuia

```text
❌ Server data in Redux       → use React Query (it's a cache, not UI state)
❌ Everything global "just in case" → over-coupling, extra re-renders; keep local
❌ Filters/page in state       → put in the URL (shareable, bookmarkable, back-button)
❌ Duplicating derivable values → derive instead (single source of truth)
❌ Form state in a global store → usually overkill; keep local or use a form lib
```

## URL ni hali iliyotumiwa kidogo

```text
Filters, pagination, search, active tab → belong in the URL.
Benefits: shareable links, browser back/forward works, survives refresh, SEO.
```

## Kwa nini inakubalika

Mahali hali inaishi huamua ubora, utendaji, na matengenezo ya programu.

Ujuzi ni kupinga tamaa ya kutengeneza kila kitu kwa dunia nzima na badala yake **kuweka ndani kwa mtazamo wa kuanzia, kulingana kila aina ya hali na zana yake sahihi** (data ya seva → React Query, inayotokana na URL → URL, UI → ndani/store).

Kufanya hii ipasavyo huepuka matatizo ya kawaida ya usanidi — data ya seva iliyoswa ndani ya Redux, hali iliyozamishwa sana duniani inayosababisha kutunga tena, na vichuja katika hali ya sehemu badala ya URL.

Hukmun hii ndiyo inayotofautisha usanidi wa hali safi, unaoweza kuzamishwa na hali iliyobichi.