useCallback()

حفظ مرجع دالة بين عمليات العرض useCallback()

useCallback يحفظ نفس مرجع الدالة بين عمليات العرض طالما لم تتغيّر الاعتماديات، لمنع إعادة إنشائها في كل رندر.

كل رندر لمكوّن React ينشئ الدوال المعرَّفة داخله من جديد بمرجع مختلف، حتى لو كان منطقها نفسه. useCallback(fn, dependencies) يحفظ نفس مرجع الدالة بين عمليات العرض ما دامت dependencies لم تتغيّر.

الفائدة الأساسية: تمرير دالة مستقرة كـ prop لمكوّن مغلّف بـ React.memo — فلا يُعيد ذلك المكوّن رسمه بسبب دالة "تبدو جديدة" في كل مرة رغم أن سلوكها لم يتغيّر.

الصياغة

const memoizedFn = useCallback(() => { doSomething(a, b); }, [a, b]);

📄 مثال

const ProductRow = React.memo(function ProductRow({ product, onDelete }) {
  return <li>{product.name} <button onClick={() => onDelete(product.id)}>حذف</button></li>;
});

function ProductList({ products }) {
  const handleDelete = useCallback((id) => {
    console.log("حذف المنتج", id);
  }, []);

  return products.map((p) => <ProductRow key={p.id} product={p} onDelete={handleDelete} />);
}

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

المعامل	الوظيفة
fn	الدالة المراد تثبيت مرجعها
dependencies	مصفوفة القيم التي عند تغيّرها يُعاد إنشاء الدالة

💡 نصائح عملية

استخدمه بشكل رئيسي مع React.memo — بدونه غالبًا لا فائدة عملية ملموسة
useCallback(fn, deps) يكافئ useMemo(() => fn, deps) — نفس الفكرة لدالة تحديدًا

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

استخدام useCallback على كل دالة في كل مكوّن بلا داع — يضيف تعقيدًا وتكلفة دون فائدة قابلة للقياس
نسيان أن الفائدة تظهر فقط إذا كان المكوّن المستقبِل مغلّفًا فعليًا بـ React.memo

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