ਤੁਸੀਂ React ਵਿੱਚ state management ਦੀ approach ਨੂੰ ਕਿਵੇਂ ਚੁਣਦੇ ਹੋ?

Question

Accepted Answer

ਟੂਲ ਨੂੰ state ਦੀ **ਕਿਸਮ** ਨਾਲ ਮਿਲਾਓ, ਬਜਾਏ ਇਸ ਦੇ ਕਿ ਡਿਫੋਲਟ ਰੂਪ ਵਿੱਚ global store ਵਲ ਜਾਓ। ਬਹੁਤੇ "global 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 ਤੋਂ ਡੇਟਾ ਦੂਰ ਸਥਿਤ ਡੇਟਾ ਦਾ **cache** ਹੈ, state ਜਾਂ ਜੋ ਤੁਸੀਂ ਮਾਲਕ ਹੋ। ਇਸਨੂੰ Redux ਵਿੱਚ ਰੱਖਣਾ ਮਤਲਬ ਤੁਸੀਂ manually loading, caching, refetching ਅਤੇ invalidation ਨੂੰ ਸੰਭਾਲਦੇ ਹੋ — ਦਰਦਨਾਕ ਅਤੇ ਗ਼ਲਤੀ ਲਈ ਜੋਖਮ ਵਿੱਚ। ਇੱਕ server-state library ਇਹ ਸਭ ਕਰਦੀ ਹੈ:

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

## ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼

- State ਨੂੰ ਜਿੰਨਾ ਸਕਿਆ **local** ਰੱਖੋ; ਇਸਨੂੰ ਉਸ ਥਾਂ ਦੇ ਨੇੜੇ ਰੱਖੋ ਜਿੱਥੇ ਇਹ ਵਰਤੀ ਜਾ ਰਹੀ ਹੈ।
- ਤੇਜ਼ੀ ਨਾਲ ਬਦਲਣ ਵਾਲੀਆਂ values ਨੂੰ **Context** ਵਿੱਚ ਨਾ ਰੱਖੋ (ਇਹ ਸਭ consumers ਨੂੰ re-render ਕਰਦਾ ਹੈ)।
- Shared client state ਲਈ ਅਕਸਰ updates ਦੇ ਨਾਲ, **selective subscriptions** (Zustand/Jotai) ਦੇ ਨਾਲ store ਨੂੰ ਤਰਜੀਹ ਦਿਓ ਤਾਂ ਕਿ components ਸਿਰਫ਼ ਉਸ slice ਲਈ re-render ਹੋਣ ਜਿਹੜਾ ਉਹ ਪੜ੍ਹਦੇ ਹਨ।
- Redux Toolkit ਲਈ ਪਹੁੰਚੋ ਜਦੋਂ ਤੁਹਾਨੂੰ genuinely complex shared state ਲਈ devtools/middleware/structure ਦੀ ਲੋੜ ਹੋ।

ਅਸਲ ਦਕਸ਼ਤਾ ਹੈ state ਨੂੰ **ਘੱਟ ਕਰਨਾ ਅਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਰੱਖਣਾ** — library ਨੂੰ ਚੁਣਨਾ ਨਹੀਂ।