React లో state management approach ని ఎలా ఎంచుకుంటారు?

Question

Accepted Answer

toolను **రకమైన** state కు పోల్చండి, డిఫాల్ట్ గా global store కు చేరుకోవడం కంటే. చాలా "global state" సమస్యలు నిజానికి ఈ పనికి తప్పు tool.

## నిర్ణయ గైడ్

```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)
```

## అత్యంత ముఖ్యమైన insight: server state ≠ client state

APIలో నుండి డేటా అనేది రిమోట్ డేటా యొక్క **cache**, మీరు స్వంతమైన state కాదు. దీన్ని Reduxలో ఉంచడం అంటే మీరు loading, caching, refetching, మరియు invalidation ను మానవీయంగా నిర్వహించాలి — బాధాకరమైనది మరియు bug-prone. Server-state library అన్నీ చేస్తుంది:

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

## గైడ్‌లైన్‌లు

- State ని **local** గా ఉంచండి; దీనిని ఉపయోగించిన ప్రదేశానికి దగ్గరగా ఉంచండి.
- వేగంగా మారే విలువలను **Context** లో ఉంచవద్దు (ఇది అన్ని consumers ను re-render చేస్తుంది).
- తరచుగా నవీకరణలతో కూడిన shared client state కోసం, **selective subscriptions** (Zustand/Jotai) కలిగిన store ను ఇష్టపడండి కాబట్టి components వారు చదువుతున్న slice కోసం మాత్రమే re-render చేస్తాయి.
- Redux Toolkit కు చేరుకోండి మీకు నిజమైన సంక్లిష్ట shared state పై దీని devtools/middleware/structure అవసరమైనప్పుడు.

- నిజమైన నైపుణ్యం **state ని తగ్గించడం మరియు సరిగ్గా ఉంచడం** — library ఎంపిక కాదు.