तपाई कहाँ प्रत्येक state राख्ने भनी कसरी निर्णय गर्नुहुन्छ?

Question

Accepted Answer

**कहाँ state रहन्छ** भनी निर्णय गर्नु सबैभन्दा महत्त्वपूर्ण आर्किटेक्चर कौशलहरूमध्ये एक हो। मार्गदर्शक सिद्धान्त: प्रत्येक state को टुक्रालाई **सबैभन्दा साँघुरो स्कोप** मा राख्नुहोस् जसले अझै पनि सबै चाहिनेलाई सन्तुष्ट गर्छ — र प्रत्येक *किसिम* को state लाई सही उपकरणसँग मेल खाइ दिनुहोस्।

## निर्णय ढाँचा

```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 अप्रयुक्त state हो

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

## किन यो महत्त्वपूर्ण छ

कहाँ state रहन्छ भनी एप्लिकेशनको सरलता, कार्यक्षमता र रक्षणीयता निर्धारण गर्छ।

कौशल भनेको सबै कुरा ग्लोबल बनाउने आवेगलाई प्रतिरोध गर्नु र यसको सट्टा **स्थानीयकरणलाई डिफल्टको रूपमा राख्नु, प्रत्येक किसिमको state लाई यसको उचित उपकरणसँग मेल खाइ दिनु** (server data → React Query, URL-derived → URL, UI → local/store)।

यो सही पाउनु सबैभन्दा सामान्य आर्किटेक्चर समस्याहरूलाई रोक्छ — server data Redux मा ठस्स पारिएको, over-globalized state को कारण re-renders, र component state मा फिल्टरहरू URL को सट्टा।

यो निर्णय एक स्वच्छ, मापनीय state आर्किटेक्चरलाई एक उलझिएको बाट अलग गर्ने कुरा हो।