તમે React માં state management approach કેવી રીતે પસંદ કરો છો?

Question

Accepted Answer

**state ના પ્રકાર** સાથે tool ને મેળ કરો, ડિફોલ્ટ રીતે global store તરફ જતા નહીં. મોટાભાગના "global state" સમસ્યાઓ ખરેખર નોકરી માટે ખોટું tool છે.

## નિર્ણય માર્ગદર્શિકા

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

## સૌથી મહત્વપૂર્ણ અંતર્દૃષ્ટિ: server state ≠ client state

API તરફથી ડેટા એ દૂરના ડેટાનો **cache** છે, તે state નથી જે તમે માલિક છો. તેને Redux માં મૂકવાનો અર્થ છે તમે manually loading, caching, refetching, અને invalidation સંભાળવું — પીડાદાયક અને bug-prone. Server-state library તે બધું કરે છે:

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

## માર્ગદર્શન નિયમો

- State ને શક્ય તેટલું **local** રાખો; તેને નજીક colocate કરો જ્યાં તેનો ઉપયોગ થાય છે.
- fast-changing values ને **Context** માં મૂકશો નહીં (તે બધા consumers ને re-render કરે છે).
- Shared client state સાથે ઘણી વાર updates હોય તે માટે, **selective subscriptions** સાથે store પસંદ કરો (Zustand/Jotai) જેથી components માત્ર તે slice માટે re-render થાય જે તેઓ વાંચે છે.
- Redux Toolkit તરફ જાઓ જ્યારે તમને તેના devtools/middleware/structure ની જરૂર હોય genuinely complex shared state પર.

વાસ્તવિક કૌશલ્ય છે **state ને minimize અને સાચી રીતે place કરવું** — library પસંદ કરવું નહીં.