ما الفرق بين useCallback و useMemo في react

لنأخذ مثال حتى نفهم الأمر بشكلٍ جيد, سنضع تلك الشفرة البرمجية مثال لنا 

function Page() {
  const [a, setA] = useState(0);
  ... 
  return (
    ...
    <Button onChange={() => { doSomething(a); }} />
  );
}

عند حدوث أي تغيير في المكون page يسبب re-render كتغيير قيمة a على سبيل المثال سيتسبب هذا بعمل re-render أيضًا للمكون Button وذلك بسبب أن الدالة doSomething في كل مرة سيتم معاملتها على أنها قيمة جديدة وبالتالي يقوم المكون Button بإعتبار أن أحد props الخاصة به تغيرت وبالتالي يقوم بعمل re-render 

بينما إن قمنا بتعديل الشفرة لتصبح على النحو التالي 

function Page() {
  const [a, setA] = useState(0);
  const onButtonChange = useCallback(() => {doSomething(a);}, []);
  ... 
  return (
    ...
    <Button onChange={onButtonChange} />
  );
}

عندما يحدث re-render للمكون Page في كل مرة سيتم إعتبار أن الدالة onButtonChange لم تتغير وبالتالي لن يتم عمل re-render للمكون Button إلا في حالة تغير أحد الوسائط التي تم تمريرها في المصفوفة التي مُررت في المعامل الثاني للدالة useCallback

بينما useMemo تقوم بتخزين ناتج إرجاع الدالة ونقوم بإستخدامها في حالة كان الدالة تقوم بعملية ثقيلة وتأخذ وقت أو تستهلك موارد وبالتالي في كل مرة نقوم بنداء الدالة لن يتم تنفيذها بل يتم إرجاع قيمة إرجاعها المخزنة بالفعل إلا في حالة تغير أحد المعاملات التي نقوم بوضعها في المصفوفة الممررة للمعامل الثاني للدالة useMemo , على سبيل المثال الشفرة التالية 

const doHeavyCalc = ()=>{//some calculations}

في كل مرة نقوم بنداء تلك الدالة سيتم عمل عمليات ثقيلة بينما إن قمنا بكتابتها على النحو التالي 

const doHeavyCalc = useMemo(()=>{//some calculations}
  ,[a])

في تلك الحالة لن يتم مناداة الدالة doHeavyCalc إلا في حالة أن تغيرت أحد المعاملات الممررة لمصفوفة الuseMemo والتي في حالتنا هنا المتغير  a, عدا ذلك سيتم إرجاع قيمة الدالة المُخزنة بالفعل