ماهي وظيفة الـ Hooks في react ؟

كل من هذه ال hooks يحتاج إلى مقال منفصل حتى يتم الحديث عنه ولذلك سأخبرك لمحة عن كل منها وعليك الاطلاع على المقالات التي سأرشحها لك لتتعرف اكثر عن كل منها :

• useState : يسمح لك هذا بإضافة حالة (state) إلى المكون الخاص بك. حيث يعيد زوجًا من القيم: الحالة الحالية ودالة التحديث. ونستخدم هذا الخطاف لمعالجة البيانات التي نريد ان نحدث المكون عند تغيرها (وذلك لأنها تسبب اعادة بناء المكون عند كل تحديث).

• useEffect : يتيح لك هذا مزامنة المكون (component) ليقوم بالتحديث عند تغير قيمة معينة. وهو مشابه لطرق دورة حياة المكونات (componentDidMount و componentDidUpdate و componentWillUnmount). ومن اشهر استخداماته هو التحقق من كون المستخدم قد قام بتسجيل الدخول قبل ان نقوم بعرض الصفحة.

• useRef : يتيح لك هذا الإشارة إلى قيمة لا نريد تحديث المكون عند تغير قيمتها.حيث يعيد كائنًا قابلًا للتغير يحتوي على خاصية .current التي تم تهيئتها بالمعامل الممرر (initialValue). واشهر استخداماته هو التحكم في عناصر الـ html باستخدام js.

• useCallback هو خطاف يعيد نسخة مخزنة من الدالة التي تمرر إليه. يتم تحديث هذه النسخة المخزنة فقط عندما يتغير أحد التبعيات المحددة. يمكن استخدام useCallback لتحسين الأداء في حالات معينة.

• useMemo : يتيح لك هذا تخزين نتائج معينة بشكل لا يتأثر بتحديثات المكون. ويستخدم بشكل اساسي لتحسين الاداء في التطبيقات المعقدة.

• useContext : يتيح لك هذا الاستخدام القيمة الحالية للسياق (context). حيث يعيد القيمة الحالية للسياق المعطى. حيث يكون قد تم إنشاء سياق في المكون الاساسي للتطبيق، واشيع استخدام له هو الوضع الليلي والنهاري للموقع.

• useReducer : يتيح لك هذا استخدام مخزن Redux في المكونات (components) الوظيفية. حيث يعيد زوجًا من القيم: الحالة (state) الحالية ودالة التحديث. ويجب ان تتعرف على Redux حتى تستطيع العمل معه بشكل جيد.

مراجع مهمة :

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

مرجع إلى الواجهة البرمجية للخطافات في React

المقالات المتعلقة بـ react

Hooks هي طريقة جديدة في React تسمح لنا بإضافة حالة (state) ودوال الدورة الحياة (lifecycle methods) وغيرها من الميزات داخل Function Components دون الحاجة إلى استخدام Class Components.

على سبيل المثال، إذا كان لديك Function Component وتريد إضافة حالة داخله، يمكنك استخدام Hook useState. وإذا كنت تريد استخدام دورة حياة المكونات، فيمكنك استخدام Hook useEffect.

وهناك العديد من الـ Hooks المختلفة المتاحة في React، وتساعدنا في إنشاء تطبيقات تفاعلية أسرع وأسهل.

ومن الـ Hooks الأكثر استخدامًا في React:

• useState: يتيح لنا إنشاء حالة داخل Function Component وتغييرها عند الحاجة دون الحاجة إلى استخدام الـ Class Components.
• useEffect: يسمح لنا باستخدام الدورة الحياة للمكونات مثل componentDidMount و componentDidUpdate و componentWillUnmount داخل Function Components.
• useContext: يسمح لنا باستخدام Context داخل Function Components بشكل أسهل وأكثر فعالية.

ولشرح كل من ال hooks منفرداً سيأخذ العديد من المقالات لذلك بدلاً من التكرار يمكنك الذهاب للتوثيق الرسمي للإطلاع على المزيد من المعلومات بشكل أكثر تفصيلاً

موسوعة حسوب

موقع react

Hooks هي ميزة مهمة في مكتبة React التي تسمح لك بإضافة حالة (state) وميزات أخرى إلى المكونات الوظيفية (Functional Components). تسهل الـ Hooks إدارة الحالة والحصول على دورة حياة المكونات وإجراءات أخرى داخل المكونات الوظيفية بطريقة أكثر بساطة وقابلية لإعادة الاستخدام.

وهنا أشرح بإيجاز كل Hook ووظيفته:

1. useState Hook: يستخدم لإضافة حالة (state) إلى المكونات الوظيفية. يسمح لك بتعريف متغير وتحديث قيمته داخل المكونة.
2. useEffect Hook: يستخدم لتنفيذ أعمال جانبية (side effects) في المكونات الوظيفية. يسمح لك بالتعامل مع دورة حياة المكون وتنفيذ العمليات في نقاط محددة مثل التحميل الأولي للمكون أو تغيير حالة معينة.
3. useRef Hook: يستخدم للوصول إلى عناصر DOM أو الحفاظ على قيم داخل المكونات الوظيفية عبر إعادة التقديم (re-rendering) دون أن يؤدي إلى تغيير قيمة الحالة وإعادة التجديد.
4. useCallback Hook: يستخدم لتجنب إعادة إنشاء الدوال في كل تقديمة جديدة للمكونة. يمكن استخدامه لتحسين الأداء عند تمرير دوال كخصائص إلى المكونات الفرعية.
5. useMemo Hook: يستخدم لتخزين القيم المحسوبة (computed values) وتجنب إعادة حسابها في كل تقديمة جديدة للمكونة. يمكن استخدامه لتحسين الأداء عند الحاجة إلى حساب قيم مكلفة الوقت.
6. useContext Hook: يستخدم للوصول إلى القيم المشتركة عبر كل شجرة المكونات بدون الحاجة إلى تمريرها عبر الخواص (props). يسمح لك بالوصول إلى السياق (context) المحدد في أي مكان داخل التطبيق.
7. useReducer Hook: يستخدم لإدارة الحالة المعقدة وتنفيذ إجراءات (actions) في المكونات الوظيفية. يوفر طريقة لتحديد حالة المكون بواسطة توجيه أوامر (dispatching actions) وتحديد الحالة الجديدة.

تتيح لك هذه الـ Hooks استخدام وظائف وميزات متقدمة في المكونات الوظيفية وتسهل إدارة حالة التطبيق وإجراء العمليات الجانبية والوصول إلى السياق وإعادة استخدام الأكواد.

أولاً عليك باستيعاب أن الخطاف (Hooks) هي ميزة جديدة في React التي تم إدخالها في إصدار React 16.8، وتسمح الـ Hooks بكتابة وإعادة استخدام الحالة والعمليات الجانبية (side effects) في الـ function components بطريقة أكثر بساطة وسهولة مقارنةً بالـ class components.

وفيما يلي بعض الفوائد التي يوفرها الخطاف مقارنةً بالـ class components:

1. يتطلب الخطاف أقل كود وصيانة مقارنةً بالـ class components، وتستطيع الإعتماد على الخطافات مباشرة داخل الـ function components دون الحاجة إلى إنشاء فئة منفصلة.
2.  يوفر استخدام الحالة المحلية (local state) بشكل مباشر في الـ function components باستخدام useState، مما يجعل إنشاء وتحديث الحالة أكثر بساطة.
3. بإمكانك استخدام الخطاف useEffect للقيام بالعمليات الجانبية مثل الاشتراك في حدث أو إصدار طلب إلى الخادم أو التعامل مع القائمة أو الوقت. يجعل الخطاف من السهل إضافة وإزالة العمليات الجانبية وتتبعها بشكل أفضل.
4. كتابة الخطافات وإعادة استخدامها في مكوناتك المختلفة، مما يسهل إدارة وصيانة الكود.
5.  في بعض الحالات، يوفر الخطاف أداءًا أفضل مقارنةً بالـ class components، حيث يتم تحسين أداء الخطافات بشكل مستمر في تحديثات React.

وإليك شرح للخطافات التي ذكرتها:

useState

يسمح لك خطاف useState بإدارة الحالة في مكون وظيفي. يعيد متغير حالة ودالة تحديث.

أي في حال لديك مكون يعرض عددًا، يمكنك استخدام خطاف useState لإنشاء متغير حالة يسمى count، بعد ذلك استخدم الدالة setCount لتحديث قيمة المتغير.

const [count, setCount] = useState(0);

useEffect

يسمح لك خطاف useEffect بتنفيذ تأثيرات جانبية في مكون وظيفي، مثل استدعاءات API، أو الاشتراكات، أو المؤقتات.

مثلاً لدينا مكون يعرض قائمة بالعناصر، هنا نعتمد على  خطاف useEffect لاستدعاء استدعاء API لتحميل العناصر.

useEffect(() => {
  // Make an API call to load the items
}, []);

ولاحظ أن المصفوفة تعني أنه لا يوجد إعتماديات، بالتالي يتم تشغيل الخطاف مرة واحدة في بداية الـ Rendering للمكون.

useRef

يتيح لك خطاف useRef الوصول إلى قيمة قابلة للتغيير من داخل مكون وظيفي، والقيمة قابلة للتغيير هي أي شيء مثل عنصر DOM أو وظيفة.

أي في حال لدينا مكون يحتاج إلى الوصول إلى عنصر DOM، نستخدم خطاف useRef لإنشاء إشارة إلى العنصر.

const myRef = useRef();

useCallback

يسمح لك خطاف useCallback بإنشاء وظيفة مؤقتة، وهي مفيدة لتحسين الأداء عندما يكون لديك دالة تعتمد على المتغيرات التي تتغير كثيرًا.

مثال: لدينا مكون يحتوي على دالة تعتمد على متغير count، هنا نستخدم خطاف useCallback لإنشاء وظيفة مؤقتة لن تتغير عندما تتغير قيمة count.

const myCallback = useCallback(() => {
  // This function will not be re-evaluated when `count` changes
}, [count]);

useMemo

خطاف آخر وهو useMemo لإنشاء قيمة مؤقتة، لتحسين الأداء أيضًا عندما يكون لديك قيمة تعتمد على المتغيرات التي تتغير كثيرًا.

const myValue = useMemo(() => {
  // This value will not be re-evaluated when `count` changes
}, [count]);

وكلا الخطافات، useCallback و useMemo، تستطيع استخدامهما لتحسين الأداء عن طريق تجنب إعادة تقييم الدالة، ولكن هناك بعض الاختلافات الرئيسية بين هاتين الخطافين:

useCallback تستخدم لمنع إعادة تقييم الدالة عندما تتغير المدخلات، أي إذا كان لديك دالة تعتمد على متغير، اعتمد على useCallback لإنشاء نسخة من الدالة لن تتغير عندما تتغير قيمة المتغير.

أما useMemo تستخدم لمنع إعادة تقييم القيمة عندما تتغير المدخلات، ففي حال كان لديك وظيفة تعتمد على متغير، تستطيع استخدام useMemo لإنشاء نسخة من القيمة لن تتغير عندما تتغير قيمة المتغير.

useContext

يسمح لك خطاف useContext بالوصول إلى سياق من مكون وظيفي، بمعنى أي شيء مثل سياق البيانات أو سياق الحالة.

مثلاً عندما تحتاج إلى الوصول إلى سياق البيانات، استخدم خطاف useContext للوصول إلى السياق.

const myData = useContext(MyDataContext);

useReducer

يسمح لك خطاف useReducer بإدارة حالة معقدة في مكون وظيفي، حيث يستخدم خطاف useReducer دالة مخفضة لتحديث الحالة.

أي عندما تحتاج إلى إدارة حالة تحتوي على قائمة من العناصر، اعتمد على خطاف useReducer لإنشاء متغير حالة يحتوي على قائمة من العناصر.

const [state, dispatch] = useReducer(reducer, initialState);

• لمحة خاطفة عن الخطافات في React
• مرجع إلى الواجهة البرمجية للخطافات في React
• الأسئلة الشائعة حول الخطافات في React