பெறப்பட்ட நிலை என்றால் என்ன மற்றும் அதை நகல் செய்வதை ஏன் தவிர்க்க வேண்டும்?

Question

Accepted Answer

**பெறப்பட்ட நிலை** என்பது **বিদ্যমান நிலை থেকে கণনা করতে পারেთ** அதை தனித்தனியாக சேமிக்கும் பதிலாக ఎదైக் மూल్య. নীতি: நீங்கள் এটি গণনা করতে পারলে, এটি সংরক্ষণ করবেন না — প্রতিটি রেন্ডারে এটি উদ্ভূত করুন। উদ্ভূত মানগুলি সংরক্ষণ করা তাদের সিঙ্ক্রোনাইজেশন থেকে বের হতে আমন্ত্রণ জানায়।

## প্রতিবর্তী-প্যাটার্ন: আপনি যা গণনা করতে পারেন তা সংরক্ষণ করা

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

এখন `total` হল `items`-এ ইতিমধ্যে উপস্থিত তথ্যের একটি দ্বিতীয় অনুলিপি। `items`-এ প্রতিটি পরিবর্তন *এছাড়াও* `total`-কে আপডেট করতে হবে, এবং যখন আপনি একটি মিস করেন (একটি অপসারণ, একটি পরিমাণ পরিবর্তন), তারা একমত নয় এবং UI ভুল মোট দেখায়।

## সমাধান: রেন্ডারে এটি উদ্ভূত করুন

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

`total` উদ্ভূত হওয়ার সাথে, সিঙ্ক্রোনাইজ করার জন্য কিছুই অতিরিক্ত নেই — `items` পরিবর্তন করুন এবং মোট সর্বদা সঠিক।

## শুধুমাত্র যদি গণনা ব্যয়বহুল হয় তবে মেমোইজ করুন

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

ভারী উদ্ভব (বড় ফিল্টার/সর্ট) এর জন্য, `useMemo`/`computed`/selectors ফলাফল ক্যাশ করে যাতে এটি শুধুমাত্র নির্ভরতা পরিবর্তিত হলে পুনরায় গণনা করে — কিন্তু এটি এখনও *উদ্ভূত*, স্বাধীন অবস্থার হিসাবে সংরক্ষিত নয়।

## সাধারণ পরিব্যাপ্ত মান

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## এটি কেন গুরুত্বপূর্ণ

অনুপ্রাণিত অবস্থার নকল না করা হল single-source-of-truth এর সরাসরি প্রয়োগ — এটি সম্পূর্ণ ত্রুটি শ্রেণী দূর করে যেখানে অনুলিপি বিঘ্নিত হয়।

"উদ্ভূত, সংরক্ষণ করবেন না" নিয়মটি আপনার অবস্থা ন্যূনতম এবং আপনার UI নির্মাণ দ্বারা সামঞ্জস্যপূর্ণ রাখে।

যা উদ্ভূত (এবং কখনও সত্যের দ্বিতীয় উৎস তৈরি করতে নয়, কেবল কর্মক্ষমতার জন্য `useMemo`/computed/selectors-এর জন্য পৌঁছানোর) স্বীকৃতি দেওয়া পরিষ্কার, ত্রুটি-প্রতিরোধী অবস্থা নকশার একটি বৈশিষ্ট্য।