باختصار الفرق في إيه اللي بيتم تحسينه.
📌 الـ useMemo:
بتحفظ نتيجة الدالة (زي قيمة أو حساب معين) عشان مش كل مرة يتم حسابه لما الصفحة يتعملها إعادة تحميل.
مفيدة لو عندك عملية حسابية تقيلة وعايزها تتنفذ بس لما حاجات معينة تتغير.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
هنا الدالة computeExpensiveValue هتشتغل بس لو a أو b اتغيروا.
📌 الـ useCallback:
- بتحفظ الدالة نفسها عشان مش كل مرة يتم إنشائها لما الصفحة يحصلها إعادة تحميل، وده بيساعد في منع إعادة تحميل الـ Components الفرعية اللي معتمدة على الدالة دي.
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
الدالة هيتعملها إعادة إنشاء بس لو a أو b اتغيروا.
بمعنى أبسط:
⚡️ الـ useMemo بتحفظ القيم.
⚡️ الـ useCallback بتحفظ الدوال.
المقال ده موضح الفرق بالتفصيل:
https://www.freecodecamp.org/news/difference-between-usememo-and-usecallback-hooks