25/07/2024
💡ما الجديد الذي قدمته React 19؟
✍🏻 بقلم: م. محمد أسامه أبوزيد.
🔹 تعد مكتبة React من أهم مكاتب لغة JavaScript والتي تعتمد على مفهوم (Single Page Application) SPA لتطوير تطبيقات الويب الحديثة، تم تصميم هذه المكتبة بواسطة شركة Meta ، وتتميز المكتبة بمجتمع برمجي كبير مما يزيد من رواجها في سوق العمل البرمجي.
🔹 أصدرت شركة Meta النسخة 19 من المكتبة في 25 أبريل من هذا العام، وقدمت هذه النسخة العديد من المميزات والتحسينات والتي رفعت من كفاءة صناعة التطبيقات البرمجية باستخدام هذه المكتبة، وسنستعرض في هذا المقال أهم هذه المميزات.
1- React Compiler
تقدم React 19 مترجماً تجريبياً (ما يزال قيد التطوير) قدم تحديثاً ثورياً من ناحية تحسين الأداء، يقوم هذا المترجم بتحويل كود React إلى JavaScript مما يقدم ربحاً عالياً في الأداء ويمكننا من الاستغناء على بعض الـ Hooks مثل (useMemo - useCallback) بحيث تقرر React تلقائياً متى تتغير الـ state ومتى تتحدث واجهة المستخدم.
2- Actions:
تساعد هذه الميزة على تبسيط التعامل مع طفرات البيانات وتحديثات الحالة بحيث يلغي الحاجة لتكويد الجزء الخاص بإدارة الـ pending state والأخطاء والـ optimistic updates (عندما نضغط مثلاً على إعجاب في الفيسبوك تتم تغيير حالة الزر بشكل فوري رغم أنه في الخلفية يقوم بالتواصل مع الـ Database ومتوقع حدوث تأخير) والطلبات المتسلسلة، وبهذا تقدم هذه الميزة طريقة حديثة وفعالة للتعامل مع عناصر مثل الـ Forms بواسطة استخدام Hooks مثل useActionState - useOptimistic - useFormStatus.
3- React Server Components:
وهي ميزة ثورية في React 19 تم تقديمها في اطر عمل مثل Nextjs بحيث يمكننا من عمل render لـ UI components على السيرفر مما يحسن من وقت تحميل الصفحة الأولية بشكل كبير بحيث يرى المستخدمون المحتوى بشكل أسرع بكثير فيما إذا تم عمل render في جانب العميل، كما يمكن باستخدام التوجيه "use server” استدعاء التوابع غير المتزامنة المنفذة على الخادم بما ندعوه Server Actions.
4- Ref as a Prop:
في React 19 أصبح بإمكاننا تمرير الـ ref كـ props دون الحاجة لاستخدام higher-order component والذي يدعى forwardRef للقيام بذلك.
5- Support for Document Metadata:
في السابق كنا بحاجة استخدام مكتبة مثل react-helmet من أجل كتابة الـ meta tags والتي من شأنها تحسين SEO (Search Engine Optimization)، الآن في React 19 يمكننا وضع هذه العناصر ضمن جسم المكون.
حتى الآن قد لا تقوم هذه الميزة باستبدال مكتبة react-helmet بشكل كلي لأن هذه المكاتب تقدم ميزات قوية لتحسين الـ SEO، ولكن يمكننا الاعتماد عليها في الحالات البسيطة.
6- Support for stylesheets:
تقدم React 19 تحسيناً كبيراً في كيفية ترتيب وتبسيط استعراض تنسيق الـ CSS مع الأخذ بعين الاعتبار جميع السيناريوهات المختلفة لعرض المكون على الصفحة، بحيث يمكن التحكم بأولوية ملفات التنسيق داخل المكون مما يقلل الحاجة لحلول يدوية أو مكاتب تنسيق معقدة.
7- Support for preloading resources:
تقدم React 19 تحسيناً كبيراً للأداء عن طريق دعم التحميل المسبق للموارد كالخطوط وملفات التنسيق وملفات الـ Js ، مما يساعد على تحميل أسرع للصفحات ودعم تجربة المستخدم خصوصاً في حالة الاتصال البطيء.
8- Other Improvements in React 19:
🔹 بإمكاننا الاستعاضة عن كتابة بـ .
🔹 دعم النصوص اللامتزامنة: يضمن React تحميل كل برنامج نصي وتنفيذه مرة واحدة فقط ، حتى إذا تم عرضه بواسطة مكونات متعددة.
🔹 تكامل أعمق مع TypeScript.
🔸 الخلاصة:
على الرغم من أن React 19 ليس إصدارا رسميا حتى الآن، إلا أن الميزات والتحسينات المذكورة أعلاه تمثل تطورات ثورية يمكن توقعها في الإصدارات المستقبلية من React، مما يجعل من هذه المكتبة خياراً مثالياً للمطورين لبناء تطبيقات ويب حديثة.