تعلم React Hooks: بناء تطبيق رسم تفاعلي خطوة بخطوة

وفقًا للخبراء، تُعد React Hooks من الميزات الأكثر طلبًا وحيوية في عالم تطوير الواجهات الأمامية. يستكشف هذا المقال أساسيات هذه الميزة الجديدة في React، مستلهمين من سلسلة دروس كريستيان جنسن المكونة من 14 جزءًا. انضم إلينا في هذه الرحلة التعليمية الشاملة!

مقدمة إلى Hooks في React

تُعد Hooks إضافة حديثة لمكتبة React، وهي تتيح لنا مشاركة المنطق بين المكونات وإعادة استخدامها بكفاءة. خلال هذا المقال، سنقوم ببناء تطبيق رسم شبيه بـ Microsoft Paint، يتيح لنا تسمية المشاريع، تبديل الألوان، الحصول على مجموعات ألوان جديدة، وبالطبع، الرسم. منصة Scrimba تتيح لك إيقاف الدروس المرئية في أي وقت والتفاعل مع الكود، وهي طريقة ممتازة للتعلم بالممارسة!

المتطلبات المسبقة

يفترض هذا المقال أن لديك بعض المعرفة المسبقة بـ ES6، JSX، State، و Props. لا تقلق إذا كنت بحاجة إلى مراجعة، فقد قمنا بتغطية هذه المفاهيم في مقالات Scrimba الأخرى المتاحة عبر الروابط المذكورة أعلاه. إذا كنت مبتدئًا تمامًا في React، فننصحك بالاطلاع على دورة React المجانية من Scrimba أولاً.

إدارة الحالة باستخدام useState

إدارة الحالة باستخدام useState – الجزء الأول

نبدأ بمنح تطبيقنا القدرة على إدارة الحالة باستخدام useState. في مكون <Playground.js /> الخاص بنا، نُعلن عن مكون يُسمى <Playground /> ونُنشئ أزرارًا لزيادة القيمة وإنقاصها. بعد ذلك، نُمرر القيمة الأولية (0) إلى useState ونستخدم تفكيك المصفوفة (state restructuring) للحصول على متغير الحالة state والدالة setState (التي تُحدّث الحالة) من دالة useState. تتم إعادة تسمية هذه المتغيرات إلى count و setCount على التوالي. ثم نعرض قيمة count في المتصفح. أخيرًا، نعرض أزرارًا تُحدّث العداد باستخدام دالة مضمنة (inline function) سيتم تشغيلها عند النقر.

لضمان دقة عدادنا، نُمرر دالة إلى دالة setState بدلاً من قيمة مباشرة. هذه الدالة تستقبل الحالة الحالية كمعامل لها، ثم تُحدّثها بناءً على المنطق المحدد:

 import React, { useState } from "react" ;
 import randomColor from "randomcolor" ;
 export default function Playground ( ) {
 const [count, setCount] = useState( 0 );
 return (
 < div >
 {count}
 < button onClick = {() => setCount((currentCount) => currentCount - 1)}> -
 </ button >
 < button onClick = {() => setCount((currentCount) => currentCount + 1)}> +
 </ button >
 </ div >
 );
 }

إذا كنت قلقًا بشأن أداء الدوال المضمنة (inline functions)، يمكنك الاطلاع على هذه المدونة.

إدارة حالة الإدخال باستخدام useState – الجزء الثاني

الآن، نضيف حقل إدخال الاسم إلى مكون <Name.js /> ليتمكن المستخدم من تسمية مشروعه. لإعداد مكون <Name.js /> باستخدام Hook useState، نحتاج إلى استيراد الـ Hook كاستيراد مُسمى (named import) ثم إعداد حالتنا. ستكون حالتنا هي name وسنقوم بتحديثها باستخدام setName. بعد ذلك، نستدعي useState ونُمرر سلسلة نصية فارغة كقيمة افتراضية للحالة. نحتاج الآن إلى عنصر إدخال بأربع خصائص رئيسية:

• value: التي ستكون دائمًا هي قيمة الحالة name المذكورة أعلاه.
• onChange: التي ستستخدم setState بشكل مضمن (inline) لتحديث name عن طريق تمرير القيمة إليها.
• onClick: التي تستخدم setSelectionRange، والتي تأخذ فهرس بداية 0 وفهرس نهاية بطول السلسلة النصية لتحديد الاسم بالكامل، مما يسهل على المستخدم النهائي تغيير الاسم.
• placeholder: الذي نُعيّنه إلى 'Untitled'.

 import React, { useState } from "react" ;
 export default function Name ( ) {
 const [name, setName] = useState( "" );
 return (
 < label className = "header-name" >
 < input value = {name} onChange = {(e) => setName(e.target.value)} onClick={(e) => e.target.setSelectionRange(0, e.target.value.length)} placeholder="Untitled" />
 </ label >
 );
 }

يمكننا الآن تسمية مشروعنا وتحديد الاسم لإعادة تعيينه بنقرة واحدة فقط:

التعامل مع التأثيرات الجانبية باستخدام useEffect

حاليًا، يقوم مكون Playground.js ببساطة بعرض عداد يمكننا زيادته أو إنقاصه. الآن سنقوم بتحديث هذا المكون بحيث يتغير لون شيء ما في كل مرة تتغير فيها قيمة العداد. نستخدم Hook useState لإعداد اللون الأولي، الذي نُعيّنه إلى null، والدالة المسؤولة عن تحديثه (setColor). بعد ذلك، نقوم بإعداد useEffect لتحديث هذا اللون. المعامل الأول لـ useEffect هو دالة setColor، والتي نريد تعيينها إلى لون عشوائي (randomColor). ولأننا نريد أن يؤدي التغيير في count فقط إلى تشغيل useEffect، نُعيّن [count] كمعامل ثانٍ (dependency array). إذا لم تتغير قيمة count، فلن يقوم الـ Hook بتشغيل التأثير وسيظل اللون كما هو.

 import React, { useState, useEffect } from "react" ;
 import randomColor from "randomcolor" ;
 export default function Playground ( ) {
 const [count, setCount] = useState( 0 );
 const [color, setColor] = useState( null );
 useEffect(
 () => {
 setColor(randomColor());
 },
 [count]
 );
 return (
 < div style = {{ borderTop: ` 10px solid ${ color }` }}>
 {count}
 < button onClick = {() => setCount((currentCount) => currentCount - 1)}> -
 </ button >
 < button onClick = {() => setCount((currentCount) => currentCount + 1)}> +
 </ button >
 </ div >
 );
 }

الآن، يتغير لوننا في كل مرة نزيد أو ننقص فيها العداد.

تحدي useState و useEffect: جلب الألوان

حان الوقت الآن لاختبار المهارات التي اكتسبناها حتى الآن. في هذا العرض المرئي، تم إضافة دالة تجلب لنا بعض الألوان العشوائية:

 const getColors = () => {
 const baseColor = randomColor().slice( 1 );
 fetch( `https://www.thecolorapi.com/scheme?hex= ${baseColor} &mode=monochrome` )
 .then( ( res ) => res.json())
 .then( ( res ) => {
 setColors(res.colors.map( ( color ) => color.hex.value));
 setActiveColor(res.colors[ 0 ].hex.value);
 });
 };

مهمتنا هي كتابة الدوال لـ setColors، والتي ستوفر لنا مصفوفة من الألوان بصيغة Hex، و setActiveColor، التي ستخبرنا ما هو اللون النشط. إذا قمنا بإعداد كل شيء بشكل صحيح، سيتم تحديث واجهة المستخدم بخمسة ألوان يمكننا النقر عليها لتوسيعها. نحتاج فقط إلى useState و useEffect لهذا الاختبار.

حل تحدي useState و useEffect

في هذا العرض المرئي، يشرح لنا كريستيان كيفية إضافة الوظائف إلى مكون <ColorPicker />. في نهايته، أصبح لدينا الآن مجموعة من الألوان:

تنظيف التأثيرات باستخدام useEffect Clean Up

الآن نضيف مكونًا يسمى <WindowSize.js /> سيعرض عرض وارتفاع النافذة في أسفل الشاشة عندما يقوم المستخدم بتغيير حجم النافذة. ثم يختفي هذا العرض بعد نصف ثانية. عندما نقوم بإعداد مؤقت (timer) أو مستمع حدث (event listener)، نحتاج أيضًا إلى تنظيفه بمجرد إلغاء تحميل المكون (component unmounts). يتطلب هذا قطعتين من الحالة: حجم النافذة ورؤية مكون <WindowSize />:

 export default function WindowSize ( ) {
 const [[windowWidth, windowHeight], setWindowSize] = useState([
 window .innerWidth,
 window .innerHeight,
 ]);
 const [visible, setVisible] = useState( false );
 }

الآن نقوم بإعداد تأثيرنا، الذي يضيف مستمع الحدث:

useEffect( () => {
 const handleResize = () => {};
 window .addEventListener( "resize" , handleResize);
 });

بعد ذلك، نقوم بإعداد مرحلة التنظيف. تُرجع هذه المرحلة دالة، ويتم تمرير مصفوفة فارغة [] لإخبار useEffect بأنه يجب تشغيله فقط عند التحميل الأول للمكون (first mount). سيتم بعد ذلك تشغيل التنظيف وإزالة مستمع الحدث:

useEffect( () => {
 const handleResize = () => {};
 window .addEventListener( "resize" , handleResize);
 return () => window .removeEventListener( "resize" , handleResize);
 }, []);

الآن نقوم بإعداد حجم النافذة، الرؤية، والمؤقت بحيث تظهر نافذة تغيير الحجم ثم تختفي بعد 500 مللي ثانية:

 const [visible, setVisible] = useState( false );
 useEffect( () => {
 const handleResize = () => {
 setWindowSize([
 window .innerWidth,
 window .innerHeight
 ]);
 setVisible( true );
 setTimeout ( () => setVisible( false ), 500 );
 };
 window .addEventListener( "resize" , handleResize);
 return () => window .removeEventListener( "resize" , handleResize);
 }, []);

ومع ذلك، لا نريد إضافة مؤقت جديد في كل مرة يغير فيها المستخدم حجم النافذة، لذا نحتاج أيضًا إلى تنظيف المؤقت باستخدام clearTimeout(timeoutId):

timeoutId = setTimeout ( () => setVisible( false ), 500 );

لإعطاء clearTimeout قيمة timeoutId من آخر مرة تم فيها تشغيل الدالة، نستخدم مفهوم الـ closures (الإغلاقات)، مما يعني أننا نُعلن عن متغير timeoutId خارج دالة handleResize. بهذه الطريقة، يظل المتغير متاحًا للدالة الداخلية. في كل مرة تُشغل فيها الدالة، سيتم مسح المؤقت السابق وإعداد مؤقت جديد. أخيرًا، نعرض دالة تغيير الحجم في المتصفح. يمكن رؤية الكود النهائي في العرض المرئي. الآن، كلما قام المستخدم بتغيير حجم نافذته، يتم تعيين حجم النافذة إلى الحجم الحالي، وتعيين الرؤية إلى true، ويتم بدء مؤقت لتعيين الرؤية إلى false بعد 500 مللي ثانية.

تحدي useRef: الوصول إلى عناصر DOM

إذا كنت بحاجة إلى الوصول إلى عناصر DOM الفعلية في React، فقد تحتاج إلى استخدام الـ Refs. يوفر React Hook يُسمى useRef مخصصًا للتعامل مع الـ Refs. لاستخدام Ref، يجب إضافته إلى العنصر:

<input ref={inputRef} type= "range" onChange={ ( e ) => setCount(e.target.value)} value={count} />

هذا الإدخال عبارة عن شريط تمرير (slider) يُحدّث العداد count وبالتالي اللون المحدد. بما أن القيمة مرتبطة أيضًا بالعداد، فإن شريط التمرير سيتعدل أيضًا إذا تم تغيير العداد عبر الأزرار التي أضفناها سابقًا. لقد قمنا الآن بالإعلان عن Ref الخاص بنا، ولكننا نحتاج أيضًا إلى إعداده عن طريق استدعاء useRef:

 const inputRef = useRef();

لتركيز حقل الإدخال في كل مرة نغير فيها العداد باستخدام الأزرار، نضيف المنطق الضروري ببساطة داخل التأثير الذي يتم تشغيله عند النقر على الأزرار:

 useEffect( () => {
 setColor(randomColor())
 inputRef.current.focus()
 },

حاليًا، يتم تعيين حجم لوحة الرسم (canvas) ليكون بارتفاع النافذة نفسها، مما يسمح للمستخدم بالتمرير داخل لوحة الرسم، وهذا قد يؤدي إلى ظهور مساحات بيضاء فارغة إذا تم تصدير الصورة. تحدينا الآن هو التأكد من أن لوحة الرسم في تطبيق الرسم الخاص بنا تكون بحجم النافذة مطروحًا منها ارتفاع الرأس (header). لتحقيق ذلك، نحتاج إلى استخدام useRef للحصول على ارتفاع الرأس وطرحه من ارتفاع النافذة.

حل تحدي useRef

في هذا العرض المرئي، يشرح لنا كريستيان كيفية الحصول على ارتفاع لوحة الرسم الصحيح باستخدام useRef. بعد ذلك، لم يعد المستخدم قادرًا على التمرير، باستثناء بضعة بكسلات فرق بين متصفح Scrimba والمتصفح العادي. لم تعد هناك مساحة بيضاء في أسفل الصورة.

تحسين الأداء باستخدام useCallback و useMemo

في هذا العرض المرئي، نتعرف على مفهوم الـ memoization (التحفيظ). يحدث هذا عندما تُرجع دالة نقية (pure function) نفس المخرجات من عملية حسابية قامت بمعالجتها سابقًا، بدلاً من إعادة تشغيل العملية الحسابية بأكملها:

 function Calculate ( num ) {
 // first call, num === 3... ok I will calculate that
 return fetchComplicatedAlgorithmToAdd47( 3 );
 // returns 50 after a while
 // second call, num === 5... ok I guess I have to calculate that too
 return fetchComplicatedAlgorithmToAdd47( 5 );
 // returns 52 after a while
 // third call, num === 3... WAIT, I've seen this before! I know this one!
 return 50 ;
 // immediately
 }

يوفر React Hookين يسمحان لنا باستخدام الـ memoization: وهما useCallback و useMemo.

فهم useCallback

نبدأ بمكون بسيط جدًا في Playground.js يعرض عدد مرات إعادة عرض الدالة:

 function Calculate ( num ) {
 const renderCount = useRef( 1 );
 return < div > {renderCount.current++} </ div > ;
 }

الآن لنفترض أن المكون يجب أن يُعاد عرضه فقط عندما تتغير قيمة العداد count، وليس عندما يتغير اللون. لتحقيق ذلك، يمكننا استخدام useCallback. نُسند نتيجة useCallback إلى متغير يُسمى calculate:

 const calculate = useCallback(
 < Calculate /> ,
 [count]
 );

سنقوم الآن بعرض متغيرنا الجديد calculate بدلاً من مكون <Calculate />. الآن، يُعاد عرض المكون فقط عندما تتغير قيمة العداد، وليس عند النقر على زر ‘Change Color’. نحتاج أيضًا إلى عرض مكون <Calculate /> بدلاً من المتغير الذي استخدمناه سابقًا وإنشاء دالة رد نداء (callback function). نستخدم useCallback ونُسندها إلى متغير يُسمى cb. العداد count هو التابع الوحيد (dependency)، مما يعني أنه إذا تغير العداد، فسنحصل على نسخة دالة جديدة:

 const cb = useCallback(
 ( num ) => console .log(num),
 [count]
 );

الآن نُمرر رقمًا (يتم تعيينه إلى العداد count) إلى مكون Calculate ودالة رد النداء، والتي نسجلها في وحدة التحكم (console). كلما أعاد مكون Calculate عرضه (أي عند النقر على زري الزائد والناقص)، سيتم تسجيل العداد الحالي في وحدة التحكم. ومع ذلك، بهذه الطريقة، يتم تسجيل العداد أيضًا في وحدة التحكم عندما ننقر على زر ‘Change Color’. هذا لأننا نستخدم الـ memoization لدالة console.log الخاصة بنا، ولكن ليس لمكوننا الفعلي، مما يعني أنه لا يتحقق مما إذا كانت دالة رد النداء هي نفسها دالة سابقة.

تحسين المكونات باستخدام React.memo

لحل هذه المشكلة، نضيف React.memo إلى مكون Calculate. الآن، سيتحقق من المدخلات ويرى ما إذا كانت هي نفسها، ولن يُعاد عرضه إذا كانت كذلك:

 const Calculate = React.memo( ( { cb, num } ) => {
 cb(num);
 const renderCount = useRef( 1 );
 return < div > {renderCount.current++} </ div > ;
 });

لم يعد زر ‘Change Color’ يسجل العداد في وحدة التحكم.

فهم useMemo

لمعرفة ما يمكن أن يفعله useMemo، نضيف استدعاء useCallback بجوار استدعاء useMemo مباشرةً:

useCallback( () => console .log( "useCallback" ));
 useMemo( () => console .log( "useMemo" ));

يخبرنا هذا أن useMemo يُستخدم في كل مرة تُعاد فيها الدالة. هذا لأن useCallback يُرجع الدوال، بينما useMemo يُرجع نتيجة الدالة:

useCallback( () => console .log( "useCallback" )); // return the function
 useMemo( () => console .log( "useMemo" )); // return the result of the function

يمكن استخدام useMemo للدوال التي تتطلب عمليات حسابية مكلفة وتريد حفظ نتائجها (memoize). بينما useCallback، من ناحية أخرى، أفضل لتمرير دالة رد نداء إلى مكون عندما لا تريد إعادة عرض المكون بشكل غير ضروري. ينتهي العرض المرئي بتحدٍ جديد. يقدم تطبيق الرسم الخاص بنا حاليًا عددًا قليلاً فقط من الألوان للعمل بها. تحدينا هو إضافة بعض الوظائف إلى زر التحديث المضاف حديثًا بحيث يمكن للمستخدم النقر على الزر والحصول على ألوان جديدة. يجب أن يتم ذلك في مكون RefreshButton.js، والذي يستقبل حاليًا دالة رد نداء ويجب أن يستدعيها عند النقر على زر التحديث. تحدينا هو تمرير دالة رد النداء باستخدام useCallback أو useMemo.

كتحدٍ إضافي، يُطلب منا أيضًا استخدام React.memo لتحفيظ مكون <Name />، والذي يُعاد عرضه حاليًا بشكل غير ضروري في كل مرة نغير فيها ألواننا.

حل تحدي useCallback و useMemo

الآن، يشرح لنا كريستيان حل التحديات السابقة، تابعوه في هذا العرض المرئي الرائع. في نهاية العرض المرئي، أصبح زر التحديث الخاص بنا يوفر ألوانًا جديدة ولامعة عند النقر عليه:

بناء Hooks مخصصة (Custom Hooks) لإعادة الاستخدام

هنا، نتعلم عن الـ Hooks المخصصة (custom Hooks) عن طريق إعادة هيكلة مكون <WindowSize /> إلى Hook. هذا مفيد جدًا لإعادة الاستخدام. حاليًا، يتعامل مكون <WindowSize /> مع مجموعتين مختلفتين من الحالة: حجم النافذة والرؤية. بما أن الرؤية قد لا تكون ضرورية في الاستخدامات المستقبلية لـ <WindowSize />، فإننا ننقل منطقها إلى مكون <Paint /> الخاص بنا، وهو أيضًا المكان الذي سنستخدم فيه Hook useWindowSize الخاص بنا. يتم إزالة الأسطر التالية من WindowSize.js:

 let timeoutId;
 /// setVisible( true );
 clearTimeout (timeoutId);
 timeoutId = setTimeout ( () => setVisible( false ), 500 );

بالإضافة إلى ذلك، يجب الآن إرجاع الأسطر التالية من <Paint.js /> بدلاً من <WindowSize />:

<div className={ `window-size ${visible ? "" : "hidden" } ` }>
 {windowWidth} x {windowHeight}
 </div>

سيتم إرجاع عرض النافذة windowWidth وارتفاع النافذة windowHeight من <WindowSize />:

 return [windowWidth, windowHeight];

لجعل المتغيرين windowWidth و windowHeight متاحين، نضيف الكود التالي إلى <Paint.js />:

 const [windowWidth, windowHeight] = useWindowSize();

لتطبيق منطق الرؤية بحيث يمكننا إظهار وإخفاء حجم النافذة حسب الحاجة، نُمرر دالة رد نداء (callback) إلى Hook useWindowSize الخاص بنا ونستخدم Ref لجعل timeoutID متاحًا بين عمليات إعادة العرض:

 let timeoutId = useRef();
 const [windowWidth, windowHeight] = useWindowSize( () => {
 setVisible( true );
 clearTimeout (timeoutId.current);
 timeoutId.current = setTimeout ( () => setVisible( false ), 500 );
 });

يمكننا الآن استدعاء هذا عندما نحتاج إليه من <WindowSize />:

 export default function useWindowSize ( cb ) {
 const [[windowWidth, windowHeight], setWindowSize] = useState([
 window .innerWidth,
 window .innerHeight,
 ]);
 useEffect( () => {
 const handleResize = () => {
 cb();
 setWindowSize([
 window .innerWidth,
 window .innerHeight,
 ]);
 };
 window .addEventListener( "resize" , handleResize);
 return () => window .removeEventListener( "resize" , handleResize);
 }, []);
 return [windowWidth, windowHeight];
 }

لدينا الآن نفس الوظائف السابقة ولكن منطق <WindowSize /> موجود في Hook قابل لإعادة الاستخدام. ينتهي الدرس بتحدٍ آخر: تحويل مكون <Canvas /> إلى دالة تستخدم الـ Hooks بدلاً من دورات حياة المكونات (lifecycle methods).

بناء تطبيق الرسم باستخدام Hooks: تبسيط الكود وتحسين القراءة

يشرح هذا العرض المرئي كيفية تحويل مكون <Canvas /> إلى مكون وظيفي (functional component) باستخدام الـ Hooks. كما يوضح لنا كيفية إعادة هيكلة تطبيقنا لجعله أنظف وأكثر قابلية للقراءة. إحدى المزايا الكبيرة لاستخدام الـ Hooks هي أن جميع المنطق المرتبط ببعضه يكون متجاورًا، على عكس مكوناتنا القديمة التي كانت فيها عناصر المنطق المرتبطة منفصلة عن بعضها البعض. في نهاية العرض المرئي، يكون تطبيق الرسم الخاص بنا قد اكتمل أخيرًا ونحن جاهزون لرسم روائعنا:

خاتمة: ملخص ما تعلمناه عن React Hooks

لقد أكملنا الآن دورة React Hooks. تعلمنا عن:

• useState: الذي يدير الحالة.
• useEffect: الذي ينفذ التأثيرات الجانبية.
• useRef: الذي يحصل على مراجع لعناصر DOM ويحتفظ بالقيم عبر عمليات إعادة العرض.
• useCallback: الذي ينشئ دوال لا تحتاج إلى إنشائها في كل عملية إعادة عرض.
• useMemo: الذي يحفظ نتائج العمليات الحسابية المكلفة (memoizes expensive computations).
• React.memo: الذي يمكن أن يحيط بمكون React ويحفظه.
• custom Hooks: التي تسمح لنا بإنشاء منطقنا القابل لإعادة الاستخدام.

هناك قاعدتان يجب تذكرهما عند استخدام أي من هذه الـ Hooks:

1. استدعِ الـ Hooks فقط في المستوى الأعلى من مكون React، أي ليس داخل كتل if أو أي شيء مشابه.
2. استدعِ الـ Hooks فقط من دوال React، وليس من دوالك المخصصة.

تهانينا على متابعة هذا الدرس وتعلم جميع المهارات المستخدمة في هذا المشروع. لمزيد من التعلم، تحقق من دورة Scrimba المجانية ‘Learn React for Free’ التي تستغرق ست ساعات وتهدف إلى جعلك خبيرًا في React! ترميز سعيد!

الخلاصة التقنية

لقد أحدثت React Hooks ثورة حقيقية في طريقة بناء مكونات React، حيث قدمت بديلًا أكثر مرونة وقابلية للقراءة للمكونات المبنية على الفئات (class components). من خلال useState، أصبح إدارة الحالة أمرًا مباشرًا، بينما أتاح useEffect التعامل الفعال مع التأثيرات الجانبية دون تعقيدات دورات حياة المكونات. كما وفرت useRef جسرًا قويًا للتفاعل مع DOM مباشرةً والاحتفاظ بالقيم عبر عمليات إعادة العرض. أما useCallback و useMemo، فقد فتحا الباب أمام تحسينات كبيرة في الأداء من خلال تقنيات الـ memoization، مما يقلل من عمليات إعادة العرض غير الضرورية ويحسن استجابة التطبيق. وأخيرًا، تُعد الـ Custom Hooks أداة لا تقدر بثمن لتعزيز إعادة استخدام المنطق وتجريده، مما يؤدي إلى كود أنظف وأكثر قابلية للصيانة. إن إتقان هذه الـ Hooks يمكّن المطورين من بناء تطبيقات React أكثر قوة وكفاءة.