आप हे कसे ठरवता की प्रत्येक स्टेट कोठे राहायला हवे?

Question

Accepted Answer

**स्टेट कोठे राहते** हे ठरविणे ही सर्वात महत्वाची आर्किटेक्चर कौशल्ये आहेत. मार्गदर्शक तत्व: प्रत्येक स्टेट च्या तुकड्याला सर्वात **संकुचित स्कोप** मध्ये ठेवा जो अजूनही सर्वांना संतुष्ट करते ज्यांना तिची गरज आहे — आणि प्रत्येक *प्रकारचे* स्टेट योग्य साधनाशी जुळवा.

## निर्णय फ्रेमवर्क

```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 हा अलोकप्रिय स्टेट आहे

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

## हे महत्वाचे का आहे

स्टेट कोठे राहते हे अॅप्लिकेशनचे साधेपणा, कार्यक्षमता आणि देखभालीयोग्यता निर्धारित करते.

हे कौशल्य म्हणजे सर्व काही जागतिक बनवण्याच्या प्रवृत्तीला प्रतिकार करणे आणि त्याऐवजी **डिफॉल्टच्या आधारे स्थानीयकृत करणे, प्रत्येक स्टेट प्रकारला त्याच्या योग्य साधनाशी जुळवणे** (सर्व्हर डेटा → React Query, URL-व्युत्पन्न → URL, UI → स्थानीय/store).

हे योग्यरित्या करणे सर्वात सामान्य आर्किटेक्चर समस्या टाळते — Redux मध्ये भरलेला सर्व्हर डेटा, जास्त-वैश्विक स्टेट ज्यामुळे री-रेंडर होते, आणि कॉम्पोनंट स्टेट मध्ये फिल्टर URL मध्ये नसून.

ही निर्णय ही शक्तिशाली, मापनक्षम स्टेट आर्किटेक्चरला गोंधळलेल्या आर्किटेक्चरपासून अलग करते.