تكرار السؤال: …
الإجابة المختصرة
دالة useMemo تحفظ نتيجة عملية حسابية معقدة، بينما useCallback تحفظ هوية دالة ممررة بين عمليات الـ Render لتفادي إعادة تصيير المكونات المحسنة بـ React.memo؛ استخدامهما للعمليات البسيطة يضيف عبء ذاكرة ومقارنة لا داعي له.
الشرح
يقوم useMemo بتنفيذ الدالة وحفظ ناتجها، وإعادة حسابه فقط عند تغير التبعيات. أما useCallback(fn, deps) فهو معادل تماماً لـ useMemo(() => fn, deps). استخدام هذه الهوكس مع عمليات حسابية بدائية (مثل جمع عددين) يكلف المتصفح ذاكرة إضافية ومقارنة مصفوفات التبعيات في كل render دون أي فائدة حقيقية.
مثال بالكود
// useMemo لعملية تصفية ثقيلة
const filteredList = useMemo(() => {
return hugeList.filter(item => item.score > threshold);
}, [hugeList, threshold]);
// useCallback لتثبيت مرجع الدالة لتمريره لمكون مغلف بـ React.memo
const handleSelect = useCallback((id: string) => {
setSelectedId(id);
}, []);أخطاء شائعة
- تغليف كل دالة في التطبيق بـ useCallback دون أن تكون ممررة لمكون نقي مدعوم بـ memo أو مصفوفة تبعيات لـ hook آخر.