તમે નક્કી કેવી રીતે કરો છો કે દરેક સ્ટેટ ક્યાં રહેવી જોઈએ?

Question

Accepted Answer

**સ્ટેટ ક્યાં રહે છે** તે નક્કી કરવું એ સૌથી મહત્વપૂર્ણ આર્કિટેક્ચર કૌશલ્યમાંથી એક છે. માર્ગદર્શક સિદ્ધાંત: દરેક સ્ટેટ પીસ **સૌથી સાંકડા સ્કોપ** માં મૂકો જે હજુ પણ તે જરૂર હોય તેવા બધાને સંતોષ આપે છે — અને દરેક *પ્રકાર*ની સ્ટેટને સાચા ટૂલ સાથે મેચ કરો.

## નિર્ણય ફ્રેમવર્ક

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

## શ્રેણીઓ અને તેમના ઘર

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

## ફ્રેમવર્ક જે સામાન્ય ભૂલોને રોકે છે

```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 ઓછો ઉપયોગમાં લેવાતી સ્ટેટ છે

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

## તે શા માટે મહત્વપૂર્ણ છે

સ્ટેટ ક્યાં રહે છે તે એપ્લિકેશનની સરળતા, પ્રદર્શન અને જાળવણીક્ષમતા નક્કી કરે છે.

કૌશલ્ય એ છે કે બધું ગ્લોબલ બનાવવાની ઇચ્છાનો પ્રતિરોધ કરવો અને તેના બદલે **ડિફોલ્ટ દ્વારા સ્થાનીયીકરણ કરવું, દરેક પ્રકારની સ્ટેટને તેના યોગ્ય ટૂલ સાથે મેચ કરવું** (સર્વર ડેટા → React Query, URL-વ્યુત્પન્ન → URL, UI → local/store).

તે સાચું મેળવવું સૌથી સામાન્ય આર્કિટેક્ચર સમસ્યાઓ ટાળે છે — Redux માં ભરેલો સર્વર ડેટા, વધુ-વૈશ્વિક સ્ટેટ જે re-renders નું કારણ બને છે, અને ફિલ્ટર્સ કમ્પોનન્ટ સ્ટેટમાં હોય તેના બદલે URL માં હોવું જોઈએ.

યો જજમેન્ટ એ છે જે સ્વચ્છ, માપી શકાય તેવી સ્ટેટ આર્કિટેક્ચરને એક ગૂંચવેલાથી અલગ કરે છે.