तुम React मध्ये state management पद्धत कसे निवडता?

Question

Accepted Answer

साधनाला **state च्या प्रकार** शी जुळवा, सामान्य global store साठी पोहोचण्याऐवजी. बहुतेक "global state" समस्या खरोखर चुकीचे साधन आहेत.

## निर्णय मार्गदर्शक

```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 मध्ये टाकणे म्हणजे loading, caching, refetching आणि invalidation ला स्वहस्ते हाताळणे — वेदनाजनक आणि त्रुटीसाठी असुरक्षित. Server-state library हे सर्व करते:

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

## मार्गदर्शक तत्त्वे

- State **स्थानिक** ठेवा जेवढे शक्य तेवढे; ते जेथे वापरले जाते तेथे ठेवा.
- वेग बदलणारी मूल्यांना **Context** मध्ये ठेऊ नकोस (त्यामुळे सर्व consumers पुन्हा render होतात).
- बारंबार अपडेट्स सह सामायिक client state साठी, **selective subscriptions** (Zustand/Jotai) असलेले store पसंद करा जेणेकरून components केवळ त्या slice साठी re-render होतील जे ते वाचतात.
- Redux Toolkit साठी पोहोचा जेव्हा तुम्हाला तुमच्या devtools/middleware/structure ची खरोखर जटिल सामायिक state साठी आवश्यकता असेल.

खरा कौशल्य **state कमी करणे आणि योग्यरित्या ठेवणे** — library निवडणे नाही.