ప్రతిটి స్థితి యొక్క భాగం ఎక్కడ ఉండాలో మీరు ఎలా నిర్ణయిస్తారు?

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కు బదులుగా కూర్పు స్థితిలో ఫిల్టర్‌లు.

ఈ తీర్పు నిర్మలమైన, స్కేలేబుల్ స్థితి ఆర్కిటెక్చర్‌ను గందరగోళపు దాని నుండి వేరుచేసేది.