आप React में state management का तरीका कैसे चुनते हैं?

Question

Accepted Answer

डिफ़ॉल्ट रूप से किसी global store की ओर भागने के बजाय, tool को state के **प्रकार** के अनुसार चुनें। ज़्यादातर "global state" की समस्याएँ असल में काम के लिए गलत tool चुनने की वजह से होती हैं।

## एक decision guide

```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 से आया data remote data का एक **cache** है, न कि वह state जिसके मालिक आप हैं। इसे Redux में रखने का मतलब है कि आप loading, caching, refetching, और invalidation को मैन्युअल रूप से संभालें — जो कष्टदायक और bug-प्रवण है। एक server-state library यह सब करती है:

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

## दिशानिर्देश

- state को जितना संभव हो उतना **local** रखें; इसे वहीं रखें जहाँ इसका उपयोग होता है।
- तेज़ी से बदलने वाली values को **Context** में न रखें (यह सभी consumers को re-render करता है)।
- बार-बार updates होने वाली shared client state के लिए, **selective subscriptions** वाले store (Zustand/Jotai) को प्राथमिकता दें ताकि components केवल उसी slice के लिए re-render हों जिसे वे पढ़ते हैं।
- जब आपको वास्तव में जटिल shared state पर इसके devtools/middleware/structure की ज़रूरत हो, तो Redux Toolkit की ओर जाएँ।

वास्तविक कौशल state को **कम से कम करना और सही जगह रखना** है — न कि कोई library चुनना।