উদ্ভূত অবস্থা হল যেকোনো মান যা আপনি বিদ্যমান অবস্থা থেকে গণনা করতে পারেন আলাদাভাবে সংরক্ষণের পরিবর্তে। নীতি: যদি আপনি এটি গণনা করতে পারেন, তাহলে এটি সংরক্ষণ করবেন না — প্রতিটি রেন্ডারে এটি উদ্ভব করুন। উদ্ভবযোগ্য মান সংরক্ষণ করা তাদের সিঙ্ক্রোনাইজেশনের বাইরে যেতে আমন্ত্রণ জানায়।
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
এখন total items-এ ইতিমধ্যে বিদ্যমান তথ্যের একটি দ্বিতীয় অনুলিপি। items-এ প্রতিটি পরিবর্তন অবশ্যই total আপডেট করবে, এবং যে মুহূর্তে আপনি একটি মিস করেন (একটি অপসারণ, একটি পরিমাণ পরিবর্তন), তারা মতবিরোধ করে এবং UI ভুল মোট প্রদর্শন করে।
// ✅ 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 পরিবর্তন করুন এবং মোট সর্বদা সঠিক।
const sortedFiltered = useMemo(
() => items.filter(i => i.active).sort(compareFn), // expensive derivation
[items] // recompute only when items change
);
ভারী উদ্ভবের জন্য (বড় ফিল্টার/সর্ট), useMemo/computed/selectors ফলাফল ক্যাশ করে যাতে এটি শুধুমাত্র নির্ভরতা পরিবর্তিত হলেই পুনর্গণনা হয় — কিন্তু এটি এখনও উদ্ভূত, স্বাধীন অবস্থা হিসাবে সংরক্ষিত নয়।
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
উদ্ভূত অবস্থা সদৃশ না করা হল একক-সত্যের-উৎসের সরাসরি প্রয়োগ — এটি একটি সম্পূর্ণ বাগ ক্লাস নির্মূল করে যেখানে অনুলিপিগুলি আলাদা হয়ে যায়।
"উদ্ভব করুন, সংরক্ষণ করবেন না" নিয়ম আপনার অবস্থা ন্যূনতম এবং আপনার UI নির্মাণ দ্বারা সামঞ্জস্যপূর্ণ রাখে।
কী উদ্ভবযোগ্য তা চেনা (এবং কর্মক্ষমতার জন্য শুধুমাত্র useMemo/computed/selectors-এর জন্য পৌঁছানো, কখনও সত্যের দ্বিতীয় উৎস তৈরি করতে নয়) পরিষ্কার, বাগ-প্রতিরোধী অবস্থা ডিজাইনের একটি বৈশিষ্ট্য।