تعزيز أداء رد الفعل: useCallback مقابل useMemo Hooks

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

متى يتم استخدام useCallback

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

مثال في الوقت الفعلي: منع عمليات إعادة العرض غير الضرورية

لنفترض أن لديك مكونًا أصليًا يقوم بتمرير وظيفة إلى مكون فرعي. بدون useCallback، سيتم إعادة عرض المكون الفرعي في كل مرة يتم فيها عرض المكون الأصلي، حتى لو لم يتغير منطق الوظيفة.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

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

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count   1);
  }, [count]);

  return (
    

      
Count: {count}
      
  );
};

export default ParentComponent;

في المثال أعلاه، يتم حفظ HandleIncrement باستخدام useCallback. سيتم إعادة عرض ChildComponent فقط عند حدوث تغييرات في العدد، مما يمنع عمليات إعادة العرض غير الضرورية ويحسن الأداء.

متى تستخدم useMemo

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

مثال في الوقت الحقيقي: تحسين الحسابات باهظة الثمن

لنفترض أن لديك مكونًا ينفذ عملية حسابية مكلفة، مثل تصفية قائمة كبيرة.

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    

       setFilter(e.target.value)}
        placeholder="Filter items"
      />
      

        {filteredItems.map((item, index) => (
          
{item}
        ))}
      
  );
};

export default ExpensiveComponent;

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

إرشادات لاستخدام useCallback وuseMemo

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

خاتمة

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