व्युत्पन्न स्थिति कोई भी मान है जो आप मौजूदा स्थिति से गणना कर सकते हैं इसे अलग से संग्रहीत करने के बजाय। सिद्धांत: यदि आप इसकी गणना कर सकते हैं, तो इसे संग्रहीत न करें — प्रत्येक रेंडर पर इसे प्राप्त करें। व्युत्पन्न मानों को संग्रहीत करने से वे समन्वय से बाहर हो जाते हैं।
() {
[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 तक पहुंचना, कभी दूसरा सत्य स्रोत बनाने के लिए नहीं) स्वच्छ, बग-प्रतिरोधी स्थिति डिजाइन की विशेषता है।