كيف احقق اكبر performance في React js

يوجد بعض النقاط الأساسية التي يمكنك الانتباه لها لتحسين أداء تطبيقات React:

1- State management: في حال كنت تستخدم Context API أو غيرها قد يؤدي الأمر إلى إعادة عرض كامل الصفحة أو الواجهة عند كل تغيير. لذلك يجب عليك محاولة فصل العناصر قدر المستطاع وتحديد الحالة المراد تحديثها.

2- عدد كبير من العناصر الأبناء التابعة لعنصر واحد: عند تحديث حالة المتغيرات في شجرة DOM ووجود عدد كبير من العناصر أيضاً سيبطئ من الأداء لذا عليك البحث عن طرق استخدام React.memo.

3- وجود العديد من الأحداث ضمن واجهة العرض: في حال كان لديك العديد من الأحداث التي يتم الاستماع لها ضمن واجهة واحدة سيؤدي ذلك أيضاً إلى بطئ تحميل وتحديث العناصر، لذا يمكنك اللجوء إلى استخدام infinity scroll أو تحميل العناصر فقط ضمن الجزء الظاهر للمستخدم.

بعض النصائح لتحسين الاداء:

1- استخدام Stateless Components والابتعاد عن تحديث الحالة بشكل عام ضمن المكونات الكبيرة.

2- استخدام Webpack أو مايشابهه عند نشر المشروع لضغظ الملفات وتحضيرها لبيئة النشر.

3- اعتماد "Dependency optimization" ومحاولة الاستغناء عن المكتبات الكبيرة الحجم قدر المستطاع.

4- الابتعاد عن اعتبار Index كمعرّف فريد في الحلقات، لمنع تكرار القيم بين عناصر الواجهة الواحدة.

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

كما يمكنك قراءة المزيد من التفاصيل من توثيق مكتبة React الرسمي في قسم "Optimizing Performance" أو باللغة العربية في ويكي حسوب: https://wiki.hsoub.com/React/optimizing_performance

الاشياء التي يجب اخذها بعين الاعتبار :

• استخدم احدث اصدار من react دائماً.

• استخدم اضافات المتصفح الخاصة بـ react والتي تمكنك من مراقبة اداء المكونات الخاصة بك.

• اهتم كثيراً بالصور والفيديو والخطوط وطريقة تحميلها في الصفحة وهنالك العديد من المكاتب التي تسهل تعاملك معها مثل react-lazyload و react-lazy-load-image-component واستخدم الصيغ التي ينصح بها مثل webp.

• لا تستخدم المكاتب المعقدة والتي تقوم بتحميل كبيرة من الاكواد طالما انك تستطيع كتابة اكواد ابسط من اجل الوظيفة التي تريدها.

• لا تستخدم react redux إلا عند الضرورة واستخدم نصائح الاستخدام عند استخدامها.

• قد يكون استخدام jsx styles افضل من css.

• استخدام Key فريد لكل عنصر عند استخدام الـ map.

• استخدم functional components واجعل المكونات الخاصة بك صغيرة.

• تعلم كيفية استخدام this بشكل مثالي.

• جرب استخدام مكاتب تدعم الـ SSR ( تحميل المكونات على السيرفر ) في react مثل next js.

• تعلم كيفية استخدام React Memo واستخدمها في تطبيقك

إضافة للخطوات السابقة لتحسن أداء تطبيقات react  يوجد أيضاً النصائح التالية وهي من أهم الخطوات التي يجب عليك الأخذ بالإعتبار مثل

1. تقسيم الكود في React باستخدام الاستيراد الديناميكي import() :  تسمح لنا مكتبة React بتقسيم ملف حزمة كبير إلى أجزاء متعددة باستخدام الاستيراد الديناميكي () متبوعًا بالتحميل البطيء لهذه الأجزاء عند الطلب باستخدام React.lazy. تعمل هذه الإستراتيجية على تحسين أداء الصفحة لتطبيق React المعقد بشكل كبير. لتنفيذ تقسيم الشفرة ، نقوم بتحويل استيراد React العادي مثل هذا:

   import Home from "./components/Home";
   import About from "./components/About";

   إلى 

   const Home = React.lazy(() => import("./components/Home"));
   const About = React.lazy(() => import("./components/About"));

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

2. تحميل الصور  (Lazy loading) في React : لتحسين تطبيق يتكون من عدة صور ، يمكننا تجنب عرض كل الصور دفعة واحدة لتحسين وقت تحميل الصفحة. مع التحميل البطيء ، يمكننا الانتظار حتى توشك كل صورة على الظهور في منفذ العرض قبل عرضها في DOM ، يمنع التحميل البطيء للصور إنشاء عُقد DOM غير ضرورية ، مما يعزز أداء تطبيق React الخاص بنا يمكنك استخدام مكتبات لتنفيذ ال تحميل الصور  (Lazy loading) في React مثل react-lazy-load-image-component