useMemo()

حفظ نتيجة حساب مكلف useMemo()

useMemo يحفظ نتيجة عملية حسابية بين عمليات العرض، ويعيد حسابها فقط عند تغيّر الاعتماديات المذكورة.

useMemo(calculateValue, dependencies) يُنفّذ الدالة الممرَّرة أثناء الرندر، ويخزّن نتيجتها. في الرندر التالي، إن لم تتغيّر أي قيمة بمصفوفة dependencies، يُعيد React القيمة المحفوظة دون إعادة تنفيذ الحساب.

يُفيد في تجنّب إعادة حساب عمليات مكلفة (فرز مصفوفة ضخمة، فلترة معقّدة) في كل رندر، وكذلك في تثبيت مرجع كائن أو مصفوفة بين عمليات العرض حتى لا يظنّ خطّاف آخر (مثل useEffect) أن القيمة تغيّرت.

الصياغة

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

📄 مثال

function ProductList({ products, query }) {
  const filtered = useMemo(
    () => products.filter((p) => p.name.includes(query)),
    [products, query]
  );

  return <ul>{filtered.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

أهم المعاملات

المعامل	الوظيفة
calculateValue	دالة بلا وسائط تُرجع القيمة المراد حفظها
dependencies	مصفوفة القيم التي عند تغيّرها يُعاد الحساب

💡 نصائح عملية

استخدمه فقط عندما يكون الحساب فعليًا مكلفًا وملموسًا — ليس كل قيمة تحتاج useMemo
مفيد لتثبيت مرجع كائن يُمرَّر لاحقًا كاعتمادية لـ useEffect أو useCallback

⚠️ أخطاء شائعة

استخدام useMemo لكل عملية حسابية بسيطة — التكلفة الإضافية للتذكّر نفسه قد تفوق فائدته
نسيان أن useMemo تلميح للأداء فقط — React قد يُعيد الحساب أحيانًا رغم ذلك ولا يجب الاعتماد عليه لصحة منطقية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار REACT الكامل بالعربي.