الحالة المشتقة هي أي قيمة يمكنك حسابها من حالة موجودة بدلاً من تخزينها بشكل منفصل. المبدأ: إذا كان بإمكانك حسابها، فلا تخزنها — اشتقها عند كل تصيير. تخزين القيم القابلة للاشتقاق يدعوها للخروج عن التزامن.
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
الآن total هي نسخة ثانية من المعلومات الموجودة بالفعل في items. كل تغيير في items يجب أن يحدّث total أيضاً، واللحظة التي تفتقد فيها واحدة (حذف أو تغيير كمية)، يختلفان وواجهة المستخدم تعرض الإجمالي الخاطئ.
// ✅ 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?"
عدم تكرار الحالة المشتقة هو تطبيق مباشر لمصدر واحد للحقيقة — إنه يلغي فئة بكاملها من الأخطاء حيث تنجرف النسخ بعيداً عن بعضها.
القاعدة "اشتق، لا تخزّن" تبقي حالتك بحد أدنى وواجهة المستخدم الخاصة بك متسقة بالبناء.
التعرف على ما هو قابل للاشتقاق (والوصول إلى useMemo/computed/selectors فقط للأداء، وليس لإنشاء مصدر حقيقة ثانٍ) هو علامة على تصميم حالة نظيف ومقاوم للأخطاء.