useMemo يبدو أنه يجب أن يقوم بتخزين "نفس القيمة"، لكن React لا تقارن المعنى التجاري. إنه يقارن هوية التبعيات. إذا تم إعادة إنشاء مصفوفة أو كائن في كل عملية عرض، فإن useMemo ترى تبعية جديدة وتعيد حسابها على أي حال.
لهذا السبب، فإن العديد من محاولات التخزين المؤقت لا تفعل شيئًا قابلاً للقياس.
الخطأ الشائع
هذا يبدو صحيحًا:
const sorted = useMemo(() => expensiveSort(items), [items]);
لكن إذا أعاد الوالد بناء items في كل مرة:
<Dashboard items={[...rawItems]} />
فإن التخزين المؤقت لا يستقر حقًا. الطفل صحيح. المدخلات غير مستقرة.
أين تتحقق فائدة useMemo
يميل التخزين المؤقت إلى أن يستحق عندما يكون أحد هذه الأمور صحيحًا:
- عملية الاشتقاق مكلفة
- يتم تمرير القيمة إلى شجرة فرعية مخزنة
- ثبات المرجع يؤثر على سلوك العرض التحتية
عادةً لا يكون الأمر مجديًا لحسابات صغيرة توجد فقط لجعل الكود يبدو محسنًا.
النموذج الذهني الأفضل
يبدأ التخزين المؤقت الجيد من المستوى العلوي. أولاً، قم باستقرار المدخلات أو توقف عن إعادة إنشاء هياكل البيانات بلا داع. ثم قم بالتحليل. ثم أضف useMemo فقط حيث يقلل من العمل الحقيقي.
هذا الأمر مهم بشكل أكبر مع تغييرات أدوات React. يمكن لمجمع React أتمتة بعض مسارات التحسين، لكنها لا تزيل الحاجة إلى فهم الهوية وتدفق البيانات.
قاعدة عملية
لا تضف useMemo لأن القيمة "مشتقة". أضفها لأن التحليل يظهر أن تكلفة إعادة الحساب أو إعادة العرض下ية تستحق التبادل مقابل التعقيد الإضافي.
قراءة إضافية