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