আপনি কীভাবে সিদ্ধান্ত নেন যে প্রতিটি অংশের অবস্থান কোথায় থাকবে?

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-এর পরিবর্তে।

এই판断 হল যা একটি পরিষ্কার, স্কেলেবল স্টেট আর্কিটেকচারকে একটি জটিল থেকে আলাদা করে।