شرح صفوف ومحتوى الفقرة
تُعيد React افتراضياً تنفيذ كامل جسم دالة المكون عند كل تصيير. ورغم أن العمليات البسيطة على عشرات العناصر لا تستغرق سوى أجزاء ضئيلة من الألف من الثانية، فإن فلترة أو فرز آلاف السجلات الإحصائية عند تبديل زر عرض جانبي غير مرتبط بها يُهدر وقت المعالج بلا مبرر.
هنا يبرز خطاف useMemo(calculateValue, dependencies) الذي يخزن القيمة الناتجة من عملية حسابية نقية بين مرات التصيير، ولا يعيد حسابها إلا إذا تغير أحد عناصر مصفوفة الاعتماديات وفق فحص Object.is():
HTML
import { useMemo, useState } from 'react';
const visible = useMemo(() => {
return COURSES.filter((c) =>
c.title.toLowerCase().includes(query.toLowerCase())
);
}, [query]);