يعد خطاف useMemo جزءًا من React's Hooks API، الذي تم تقديمه في React 16.8، وهو مصمم لتحسين الأداء من خلال حفظ نتائج العمليات الحسابية باهظة الثمن. وإليكم الشرح التفصيلي:

ما هو useMemo؟

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

بناء الجملة

const memoizedValue = useMemo(() => {
  // computation or expensive calculation
  return value;
}, [dependencies]);

حدود

1. الدالة (رد الاتصال): دالة تُرجع قيمة تريد حفظها.
2. مصفوفة التبعيات: مصفوفة من التبعيات التي، عند تغييرها، ستؤدي إلى إعادة حساب القيمة المحفوظة. إذا كانت هذه المصفوفة فارغة، فسيتم حساب القيمة مرة واحدة فقط (مثل ComponentDidMount).

كيف يعمل

• في العرض الأولي، سيقوم useMemo بتشغيل الوظيفة المقدمة وإرجاع نتيجتها، والتي تم تخزينها في memoizedValue.
• في عمليات العرض اللاحقة، ستتحقق React مما إذا كانت أي من التبعيات قد تغيرت. إذا لم يفعلوا ذلك، فسيتم إرجاع القيمة المخزنة مؤقتًا بدلاً من إعادة حسابها.
• إذا تغيرت أي تبعية، فسوف تقوم React بتنفيذ الوظيفة مرة أخرى، وتحديث القيمة المخزنة مؤقتًا، وإرجاع القيمة الجديدة.

مثال

إليك مثال بسيط لتوضيح useMemo:

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

const ExpensiveComponent = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Calculating factorial...');
    return n  computeFactorial(number), [number]);

  return (
    

      
Factorial of {number} is {factorial}
    
  );
};

const App = () => {
  const [num, setNum] = useState(0);

  return (
    

       setNum(num   1)}>Increase Number
      
    
  );
};

export default App;

متى تستخدم useMemo

• الحسابات باهظة الثمن: استخدم useMemo عندما يكون لديك حسابات باهظة الثمن من حيث الأداء ولا تحتاج إلى إعادة حسابها إلا عند تغيير مدخلات معينة.
• تجنب التصيير غير الضروري: إذا قمت بتمرير كائنات أو مصفوفات كدعائم إلى مكونات فرعية، فيمكنك استخدام useMemo لضمان عدم إعادة إنشائها في كل تصيير، مما يمنع عمليات إعادة التصيير غير الضرورية.

اعتبارات هامة

• الأداء: الإفراط في استخدام useMemo يمكن أن يؤدي إلى تعليمات برمجية أكثر تعقيدًا وقد لا يؤدي دائمًا إلى فوائد الأداء. من الأفضل استخدامه لإجراء حسابات باهظة الثمن حقًا.
• إعادة إنشاء الوظيفة: إذا كنت تقوم بحفظ الوظائف، فكن حذرًا حيث سيتم إعادة إنشاء تعريف الوظيفة ما لم يتم تضمينه في useCallback.

خاتمة

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