وظائف Hooks في React.JS

كل من useCallback و useMemo هما هوكز (Hooks) في مكتبة React لإدارة الحالة والأداء في تطبيقات React. يتم استخدام هذين الهوك لتحسين أداء التطبيق عن طريق تقليل العمل الزائد وإعادة العمليات غير الضرورية.
useCallback

useCallback هو هوك يسمح بتذكر واستخدام دالة معينة بصورة مرنة. يستخدم عادة عندما تحتاج إلى تمرير دالة إلى مكون فرعي كخاصية (prop)، وترغب في تجنب إعادة إنشاء الدالة في كل مرة يتم فيها إعادة رسم المكون الأصلي. بوجود useCallback، يمكنك ضمان أن الدالة لا تعاد إلا عندما تتغير إحدى الاعتماديات (dependencies) التي تمرّرها إليه.

مثال

import React, { useState, useCallback } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

في المثال أعلاه، يتم استخدام useCallback لتذكر الدالة handleClick وتمريرها إلى خاصية onClick للزر. يتم إعادة إنشاء الدالة handleClick فقط عندما يتغير count.

useMemo
useMemo هو هوك يسمح بحفظ نتيجة عملية محسوبة وإعادة استخدامها عندما تكون الاعتماديات ثابتة. يستخدم عادة لتجنب إعادة حساب قيم مكلفة مثل العمليات الحسابية أو تحويلات البيانات في كل مرة يتم فيها إعادة رسم المكون.
مثال:

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const totalPrice = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]);

  return (
    <div>
      <p>Total Price: {totalPrice}</p>
    </div>
  );
}

في المثال أعلاه، يتم استخدام useMemo لحساب totalPrice بناءً على items الممررة كاعتمادية. يتم حساب totalPrice فقط عندما يتغير items، وإلا سيتم إعادة استخدام القيمة المحسوبة السابقة.

باستخدام useCallback و useMemo، يمكن تحسين أداء تطبيقات React وتقليل العمل الزائد وإعادة العمليات غير الضرورية.

• 1- useCallback: useCallback هو هوك في React يُستخدم لتحسين أداء تطبيق React عند استخدام الدوال في العناصر النائبة (components). يقوم useCallback بتخزين الدالة المُعطاة وإرجاع نسخة محسنة منها عندما يتغير أحد الاعتماديات المُعطاة له.

في حالات عادية عندما يتم إعادة تقديم العنصر النائب يتم إعادة إنشاء الدوال المعطاة له مرة أخرى. ومع استخدام useCallback، يمكن تجنب هذا السلوك وتقليل عمليات الإعادة اللازمة. يساعد في تحسين أداء التطبيق بشكل عام.

مثال على استخدام useCallback:

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return <button onClick={handleClick}>Click me</button>;
}

في المثال أعلاه، يتم استخدام useCallback لتجنب إعادة إنشاء الدالة handleClick عند إعادة تقديم العنصر النائب. تم تمرير قائمة الاعتماديات الخاوية []، مما يعني أن الدالة لا تعتمد على أي قيم، وبالتالي يتم إرجاع نسخة منها دون تغيير عند إعادة التقديم.

• 2- useMemo: useMemo هو هوك في React يُستخدم لتحسين أداء تطبيق React عند استخدام القيم المُحسوبة (computed values). يقوم useMemo بتخزين القيمة المُحسوبة وإرجاع نسخة محسنة منها عندما يتغير أحد الاعتماديات المُعطاة له.

عند استخدام القيم المحسوبة في تطبيق React، قد يتم إعادة حسابها في كل إعادة تقديم للعنصر النائب، وهذا يمكن أن يؤدي إلى تأثير سلبي على أداء التطبيق. باستخدام useMemo، يمكن تجنب إعادة حساب القيم المحسوبة إلا عندما يتغير أحد الاعتماديات المُعطاة له.

مثال على استخدام useMemo:

import React, { useMemo } from 'react';

function MyComponent() {
  const expensiveValue = useMemo(() => {
    // Some expensive computation
    return computeExpensiveValue();
  }, [dependency1, dependency2]);

  return <div>{expensiveValue}</div>;
}

في المثال أعلاه، يتم استخدام useMemo لتجنب إعادة حساب القيمة المكلفة expensiveValue في كل إعادة تقديم للعنصر النائب. تم تمرير قائمة الاعتماديات [dependency1, dependency2]، وعندما يتغير أحد الاعتماديات يتم إعادة حساب القيمة المكلفة وتحسين الأداء بشكل عام.

يمكنك التوسع في معرفة تفاصيل اكثر من خلال هذا  الرابط  بالاضافة الي التطبيق العملي 

بتاريخ منذ ساعة مضت قال أسامة زيادة:

كل من useCallback و useMemo هما هوكز (Hooks) في مكتبة React لإدارة الحالة والأداء في تطبيقات React. يتم استخدام هذين الهوك لتحسين أداء التطبيق عن طريق تقليل العمل الزائد وإعادة العمليات غير الضرورية.
useCallback

useCallback هو هوك يسمح بتذكر واستخدام دالة معينة بصورة مرنة. يستخدم عادة عندما تحتاج إلى تمرير دالة إلى مكون فرعي كخاصية (prop)، وترغب في تجنب إعادة إنشاء الدالة في كل مرة يتم فيها إعادة رسم المكون الأصلي. بوجود useCallback، يمكنك ضمان أن الدالة لا تعاد إلا عندما تتغير إحدى الاعتماديات (dependencies) التي تمرّرها إليه.

مثال

import React, { useState, useCallback } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

في المثال أعلاه، يتم استخدام useCallback لتذكر الدالة handleClick وتمريرها إلى خاصية onClick للزر. يتم إعادة إنشاء الدالة handleClick فقط عندما يتغير count.

useMemo
useMemo هو هوك يسمح بحفظ نتيجة عملية محسوبة وإعادة استخدامها عندما تكون الاعتماديات ثابتة. يستخدم عادة لتجنب إعادة حساب قيم مكلفة مثل العمليات الحسابية أو تحويلات البيانات في كل مرة يتم فيها إعادة رسم المكون.
مثال:

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const totalPrice = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]);

  return (
    <div>
      <p>Total Price: {totalPrice}</p>
    </div>
  );
}

في المثال أعلاه، يتم استخدام useMemo لحساب totalPrice بناءً على items الممررة كاعتمادية. يتم حساب totalPrice فقط عندما يتغير items، وإلا سيتم إعادة استخدام القيمة المحسوبة السابقة.

باستخدام useCallback و useMemo، يمكن تحسين أداء تطبيقات React وتقليل العمل الزائد وإعادة العمليات غير الضرورية.

اليس بإمكاني استخدام useEffect بدلا من useCallback ؟

بتاريخ 18 دقائق مضت قال منتصر احمد:

اليس بإمكاني استخدام useEffect بدلا من useCallback ؟

نعم، يمكنك استخدام "useEffect" بدلاً من "useCallback" في بعض الحالات، ولكن هناك بعض الاختلافات في الوظائف والأغراض التي يخدمانها.

useCallback
يستخدم "useCallback" لتذكر دالة معينة وتحديد الاعتماديات (dependencies) التي إذا تغيرت، سيتم إعادة إنشاء الدالة. ينصح بشدة باستخدام "useCallback" عند تمرير دالة كخاصية (prop) لمكون فرعي (sub-component)، حيث يساعد في تجنب إعادة إنشاء الدالة في كل تحديث.

useEffect
يستخدم "useEffect" للتعامل مع العمليات أو التأثيرات الجانبية (side effects) في المكون، مثل استدعاء الواجهات البرمجية الخارجية أو إضافة مستمعين للأحداث أو التلاعب بالمكونات الأخرى. يتم تنفيذ "useEffect" في كل مرة يتم فيها إعادة رسم المكون، مما يعني أنه يمكن أن يحدث في كل تحديث للمكون. على الرغم من أنه يمكن استخدام "useEffect" لتحقيق نفس الغرض العام لـ "useCallback"، إلا أن هناك فارقاً هاماً بينهما. عند استخدام "useEffect"، سيتم إعادة تنفيذ الكود المحتوى فيه في كل تحديث للمكون، بينما يتم إعادة تنفيذ الدالة المذكورة في "useCallback" فقط عند تغير الاعتماديات.

إذا كنت تحتاج فقط لتحقيق التأثير الجانبي مرة واحدة عند تغير الاعتماديات، فإن استخدام "useCallback" هو الخيار المناسب. إذا كنت تحتاج إلى تنفيذ تأثير جانبي في كل تحديث للمكون، بغض النظر عن التغير في الاعتماديات، فيمكنك استخدام "useEffect".

تذكر أنه في بعض الحالات قد تحتاج إلى استخدام كلا الهوكس معًا لتحقيق التأثير المطلوب، وذلك حسب احتياجات تطبيقك الخاص.

كل من useCallback وuseMemo هما هوكس Hook في React، ويستخدمان لتحسين أداء التطبيقات عن طريق تجنب إعادة الحسابات غير الضرورية.

useCallback:
useCallback يستخدم لتجنب إعادة إنشاء الدوال عند إعادة تقديم المكونات وتمرير الدوال كخاصية إلى المكونات الفرعية. يتم استخدامه لتحسين أداء التطبيق عن طريق تخزين الدوال المعرفة مسبقًا وإعادتها عند الطلب. يتلقى useCallback وسيطًا لكلمة دالة وقائمة من الاعتمادات التي يعتمد عليها الخطاب. عندما يتم تغيير أي من الاعتمادات التي يتم تمريرها إلى useCallback، فسيتم إعادة إنشاء الدالة. وإلا، يتم إرجاع الدالة المخزنة في الذاكرة.

مثال:
في المثال التالي، يتم استخدام useCallback لتجنب إعادة إنشاء الدالة عندما يتم إعادة إنشاء مكون الابن الذي يتلقى الدالة كخاصية.

import React, { useCallback, useState } from 'react';
function ParentComponent() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent increment={increment} />
    </div>
  );
}
function ChildComponent({ increment }) {
  return (
    <div>
      <button onClick={increment}>Increment count</button>
    </div>
  );
}

useMemo:
useMemo يستخدم لتجنب إعادة حساب القيم المعقدة بشكل متكرر. يتلقى useMemo وسيطين: القيمة التي يتعين حسابها والقيمة التي يعتمد عليها. يتم إرجاع القيمة المخزنة في الذاكرة إذا لم تتغير القيمة المعتمدة. وإلا، يتم إعادة حساب القيمة.

مثال:
في المثال التالي، يتم استخدام useMemo لتجنب إعادة حساب القيمة المعقدة بشكل متكرر.

import React, { useMemo, useState } from 'react';

function ComplexCalculation({ x, y }) {
  // Complex calculation that we want to avoid recomputing unnecessarily
  const result = useMemo(() => {
    // Some really expensive operation
    console.log('Calculating...');
    return x * y;
  }, [x, y]);

  return <p>Result: {result}</p>;
}

function App() {
  const [x, setX] = useState(1);
  const [y, setY] = useState(1);

  return (
    <div>
      <input type="number" value={x} onChange={(e) => setX(+e.target.value)} />
      <input type="number" value={y} onChange={(e) => setY(+e.target.value)} />
      <ComplexCalculation x={x} y={y} />
    </div>
  );
}

بتاريخ 12 ساعة قال منتصر احمد:

اليس بإمكاني استخدام useEffect بدلا من useCallback ؟

هناك مثال بسيط يوضح استخدام useEffect بدلاً من useCallback في حالة تمرير الدوال كخاصية إلى المكونات الفرعية وتتوقع أن تتغير معلمة الاعتماد عليها بشكل متكرر:

import React, { useState, useEffect } from 'react';

function ChildComponent({ handleClick }) {
  // Child component that renders a button and calls the handleClick function when clicked
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Callback function that is created once and does not depend on any props or state
    const increment = () => {
      setCount(count + 1);
    };

    // Pass the increment function as a prop to the child component
    // The child component will only be re-rendered when the count state changes
    return <ChildComponent handleClick={increment} />;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

في هذا المثال، يتم استخدام useEffect لتمرير الدالة كخاصية إلى المكون الابن ChildComponent. يتم إنشاء الدالة في useEffect وتمريرها كخاصية إلى ChildComponent. يتم إعادة تقديم ChildComponent فقط عندما يتغير العداد count، وليس عند كل تحديث لـ ParentComponent. هذا يتيح لنا تجنب إعادة إنشاء الدالة handleClick بشكل متكرر ويحسن من أداء التطبيق.