useMemo الحساب المُخزَّن
آخر تحديث: 2026-11-03
useMemo الحساب المُخزَّن
يخزّن useMemo نتيجة عملية حسابية: ما دامت الاعتماديات كما هي يعيد النتيجة السابقة ويتخطّى التصفية أو الترتيب أو التحويل المكلف، كما يبقي مرجع الكائن أو المصفوفة ثابتاً، وهو ما يتناغم مع مصفوفة اعتمادية ومع المكوّنات الفرعية المُخزَّنة. وهو أداة أداء لا ضمان دلالي: فـ React حرّ في التخلّي عن الذاكرة المؤقتة، لذا يجب أن تبقى النتيجة صحيحة حتى عند إعادة حسابها من الصفر.
| المجموعة | الآثار الجانبية والأداء |
|---|---|
| النوع | خطاف |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const result = useMemo(() => {
return computeHeavy(list, keyword) // العملية الحسابية المكلفة
}, [list, keyword]) // لا إعادة حساب ما دامت الاعتمادية كما هي⚙️ المعاملات
| factory | دالة بلا وسائط تُعيد القيمة المراد تخزينها. ولا تُنفَّذ مجدداً إلا حين تتغيّر الاعتماديات. |
|---|---|
| deps | مصفوفة الاعتماديات: أي تغيّر يعيد حساب القيمة؛ والمصفوفة الفارغة تحسبها عند التركيب فقط. |
القيمة المرجعة：يعيد النتيجة المخزّنة للمصنع؛ ما دامت الاعتماديات لا تتغيّر فيعيد المرجع نفسه نفسه.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
كتابة كلمة مفتاحية تصفي القائمة لحظياً؛ والضغط على «Toggle theme» يبدّل لون الخلفية فقط دون إعادة التصفية (وهذا ما تفعله ذاكرة useMemo المؤقتة).💡 النقاط الأساسية
💡 نصيحة استخدامان رئيسيان: تخزين العمليات الحسابية المكلفة، وتثبيت المراجع. والثاني هو شرطصحّة مزيج «كائن كاعتمادية + مكوّن ابن مُخزَّن».
⚠️ تحذير تغليف عملية تافهة مثل جمع رقمين في useMemo يجعل الشيفرة أبطأ وأصعب قراءة — قِس التباطؤ أولاً ثم حسّن.
ℹ️ ملاحظة قد يتخلّى React عن الذاكرة المؤقتة (مثلاً حين يُعاد تركيب مكوّن خارج الشاشة)، فلا تعامل useMemo على أنه ضمان بقاء القيمة مخزّنة.
🏷️ المزيد من الآثار والأداء
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين useMemo و useCallback؟
ج useMemo يخزّن قيمة محسوبة، و useCallback يخزّن مرجع دالة؛ والأخير يعادل useMemo(() => fn, deps).
س هل مصفوفة الاعتماديات الفارغة آمنة؟
ج فقط حين لا يقرأ المصنع أي قيمة تفاعلية من الخارج؛ فقراءة الحالة أو props دون إدراجهما تعطي نتيجة بائتة.
س هل تغليف كل عملية حسابية بـ useMemo يجعل Things أسرع؟
ج لا. للتخزين المؤقت كلفة ذاكرة ومقارنة، فتخزين العمليات البسيطة قرار مُضِرّ — استخدمه عند نقاط الاختناق الحقيقية فقط.
