तपाईले React मा state management पद्धति कसे छान्नुहुन्छ?

Question

Accepted Answer

उपकरणलाई state को **प्रकार** सँग मेल खान्न दिनुहोस्, सामान्य रूपमा वैश्विक store मा पुग्नुको सट्टा। अधिकांश "वैश्विक 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 बाट आएको डेटा दूरस्थ डेटाको **क्यास** हो, आफूले मालिकाना गरेको state होइन। यसलाई Redux मा राख्नु भन्ने कुरा हो loading, caching, refetching, र invalidation लाई म्यानुअली सम्भाल्नु—पीडादायक र त्रुटिको लागि जोखिमयुक्त। Server-state लाइब्रेरीले यो सब गर्छ:

```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 प्राथमिकता दिनुहोस् ताकि घटकहरू केवल आफूले पढेको slice को लागि पुनः render हुन्।
- Redux Toolkit प्रयोग गर्नुहोस् जब तपाईले वास्तवमा जटिल साझा state मा यसको devtools/middleware/structure आवश्यक हुन्छ।

सत्य कौशल **state कम गर्नु र सही ठाउँ गर्नु** हो—लाइब्रेरी छान्नु होइन।