تحسين الأداء في React: أسرع واجهة بأقل جهد

أحيانًا يكون التطبيق صحيحًا لكنه بطيء. الزر يتأخر، القائمة تتلعثم، أو يحدث إعادة تصيير بلا سبب. هنا يأتي دور تحسين الأداء في React.

في هذا الدرس سنفهم كيف نقلل إعادة التصيير، ومتى نستخدم React.memo وuseMemo وuseCallback بدون مبالغة.

لماذا يحدث البطء؟

• إعادة تصيير مكوّنات كثيرة بدون داعٍ.
• عمليات حسابية ثقيلة داخل JSX.
• تمرير دوال جديدة في كل تصيير.

الفكرة الأساسية: قلّل ما يتغيّر

1. قلّل props المتغيرة حتى لا تُعيد المكوّنات التصيير.
2. حافظ على الدوال باستخدام useCallback.
3. احفظ القيم الثقيلة باستخدام useMemo.

1) React.memo لمنع إعادة التصيير

const Item = React.memo(function Item({ title }) {
  console.log("render item");
  return <li>{title}</li>;
});

الآن مكوّن Item لن يعيد التصيير إلا إذا تغيّرت props الخاصة به.

2) useCallback لحفظ الدوال

const addItem = useCallback(() => {
  setCount((c) => c + 1);
}, []);

بدون useCallback، يتم إنشاء دالة جديدة في كل تصيير مما يجبر المكوّنات الأبناء على إعادة التصيير.

3) useMemo لحفظ القيم الثقيلة

const total = useMemo(() => {
  return items.reduce((sum, i) => sum + i.price, 0);
}, [items]);

هذا يمنع الحساب من التنفيذ في كل تصيير طالما items لم تتغير.

4) تحسين القوائم الطويلة

• قسّم القائمة إلى مكوّنات أصغر.
• استخدم key ثابت.
• فكر في virtualization إذا كانت القائمة ضخمة جدًا.

خطوات عملية قبل التحسين

• افحص البطء في React DevTools Profiler.
• حدد المكوّنات التي تعيد التصيير كثيرًا.
• طبّق التحسين على الأماكن المؤثرة فقط.

الأسئلة الشائعة — FAQ

متى أحتاج تحسين الأداء في React؟

عندما يظهر بطء أو إعادة تصيير كثيرة تؤثر على تجربة المستخدم.

ما الفرق بين useMemo و useCallback؟

useMemo يحفظ قيمة، وuseCallback يحفظ دالة بين التصييرات.

هل memo يحل كل مشاكل الأداء؟

لا، استخدمه بحذر فقط عند الحاجة.

هل تحسين الأداء ضروري دائمًا؟

لا، الأفضل البناء أولًا ثم التحسين عند ظهور مشكلة.

كيف أعرف سبب البطء؟

باستخدام React DevTools و Profiler.