شرح useMemo في React

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

الهدف من استخدام useMemo هو تجنب إعادة حساب القيم إلا عند تغيير أحد المدخلات (التبعيات). وهذا يمكن أن يساعد في تقليل أوقات التحديث ويجعل التطبيق أكثر استجابة.

متى أستخدم useMemo؟

تستخدم useMemo عندما يكون لديك عملية مكلفة (مثل فرز أو تصفية مصفوفات كبيرة) وترغب في التأكد من عدم إعادة حساب هذه العملية إلا إذا تغيرت البيانات المدخلة.

مثال بسيط

لنفرض أن لدينا مكون يعرض قائمة من العناصر ويتم تصفيتها بناءً على إدخال المستخدم. نريد التأكد من أن عملية التصفية تتم فقط عند تغيير قائمة العناصر أو الإدخال.

import React, { useState, useMemo } from 'react'; const FilteredList = ({ items }) => {     const [filter, setFilter] = useState('');     // استخدام useMemo لحفظ النتيجة المصفاة     const filteredItems = useMemo(() => {         console.log('Filtering items');         return items.filter(item => item.toLowerCase().includes(filter.toLowerCase()));     }, [items, filter]); // إعادة حساب النتيجة فقط عند تغيير items أو filter     return (         <div>             <input                 type="text"                 placeholder="Filter items"                 value={filter}                 onChange={e => setFilter(e.target.value)}             />             <ul>                 {filteredItems.map((item, index) => (                     <li key={index}>{item}</li>                 ))}             </ul>         </div>     ); } export default FilteredList;

شرح الكود

• استخدام useState: هنا نستخدم useState لإنشاء حالة محلية filter التي تحتفظ بنص التصفية.

• استخدام useMemo: نستخدم useMemo لحفظ النتيجة المصفاة للعنصرات. يتم إعادة حساب النتيجة فقط إذا تغيرت items أو filter.

• فلترة العناصر: عملية الفلترة تتم داخل useMemo وتطبع رسالة إلى وحدة التحكم (console) عند تنفيذها لنعرف متى يتم إعادة حساب الفلترة.

• إدخال النص: يمكن للمستخدم إدخال نص لتصفية العناصر، وعند كل تغيير في الإدخال، يتم تحديث حالة filter.

• عرض النتيجة: يتم عرض العناصر المصفاة في قائمة غير مرتبة (ul).

باستخدام useMemo، نتأكد من أن عملية الفلترة لا تتم إلا عند الضرورة، مما يحسن أداء المكون.