আপনি React-এ state management পদ্ধতি কীভাবে বেছে নিন?

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 থেকে ডেটা দূরবর্তী ডেটার একটি **ক্যাশ**, এমন state নয় যা আপনি নিজে রাখেন। এটি Redux এ রাখার অর্থ আপনাকে ম্যানুয়ালি loading, caching, refetching এবং invalidation পরিচালনা করতে হবে — এটি যন্ত্রণাদায়ক এবং বাগপ্রবণ। একটি server-state লাইব্রেরি সব কিছু করে:

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

## নির্দেশিকা

- State কে যতটা সম্ভব **স্থানীয়** রাখুন; এটি যেখানে ব্যবহৃত হয় তার কাছাকাছি রাখুন।
- দ্রুত পরিবর্তনশীল মান **Context** এ রাখবেন না (এটি সমস্ত consumers পুনরায় রেন্ডার করে)।
- ঘন ঘন আপডেট সহ shared client state এর জন্য, **selective subscriptions** সহ একটি store পছন্দ করুন (Zustand/Jotai) যাতে components শুধুমাত্র যে slice পড়ে তার জন্য পুনরায় রেন্ডার হয়।
- আপনি যখন সত্যিকারের জটিল shared state এ এর devtools/middleware/structure প্রয়োজন তখন Redux Toolkit এর দিকে যান।

আসল দক্ষতা হল state **কমানো এবং সঠিকভাবে স্থাপন** করা — লাইব্রেরি বেছে নেওয়া নয়।