أزاى تعمل Hook بنفسك في React ؟

[x32x01]

الـ Hooks في React تعتبر واحدة من الأدوات اللي غيرت شكل البرمجة في الـ Frontend. مش بس وفرت علينا وقت وجهد، لكن كمان بقت حاجة أساسية لأي مبرمج بيشتغل بـ React. وبالرغم من كده، ساعات بنلاقي نفسنا بنكرر نفس الكود في أكتر من مكان، وهنا بيجي دور الـ Custom Hooks. تعال نتكلم بالتفصيل إزاي تعمل الـ Hook بتاعك بنفسك.

1. ابدأ بتحديد المشكلة اللي عاوز تحلها:​

أول حاجة لازم تفكر فيها هي إيه الحاجة اللي بتعملها كتير في الكود، واللي محتاج تكرارها أكتر من مرة؟ ممكن يكون استدعاء API، التعامل مع الـ Local Storage، أو حتى إدارة حالة معينة. أيًا كان اللي بتعمله، لو بتلاقي نفسك بتكرر نفس الكود في أكتر من كومبوننت، دي علامة إنك ممكن تستفيد من Custom Hook.

2. اكتب الكود كأنه في كومبوننت عادي:​

قبل ما تبدأ في تحويل الكود لـ Hook، جرب تكتبه في كومبوننت عادي. مثلا، لو بتتعامل مع نافذة المتصفح عشان تعرف حجمها (width & height)، جرب تكتب كود بيستخدم useState وuseEffect عادي جدًا. الهدف هنا إنك تتأكد إن الكود شغال صح.

3. حوّل الكود لـ Hook:​

بمجرد ما الكود يكون شغال في كومبوننت، ابدأ في تحويله لـ Hook. هنا بتيجي خطوة إعادة الهيكلة. خد الكود اللي بيستخدم useState وuseEffect وانقله لملف جديد وسمّي الـ Hook الجديد، بس لازم يكون اسمه بيبدأ بـ use. مثلا، لو الـ Hook بيهتم بحجم النافذة، سميه useWindowSize.

4. ممكن تستخدم Hooks تانية جوا الـ Hook بتاعك:​

الحلاوة في الـ Custom Hooks إنك ممكن تستفيد من الـ Hooks اللي موجودة بالفعل. لو محتاج حالة (state) أو تأثير جانبي (side effect)، ببساطة استخدم useState وuseEffect جوا الـ Hook الجديد.

5. ارجع البيانات اللي محتاجها:​

في نهاية الـ Hook، قرر إيه البيانات أو الدوال اللي محتاج ترجّعها عشان الكومبوننتات اللي هتستخدم الـ Hook تستفيد منها. مش شرط ترجّع حاجة واحدة، ممكن ترجّع أكتر من قيمة أو دالة في مصفوفة أو كائن.
مثال عملي:
هنا مثال بسيط لعمل Custom Hook بيتعامل مع حجم نافذة المتصفح:

import { useState, useEffect } from 'react';
function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });
  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return size;
}
export default useWindowSize;

6. استخدم الـ Hook الجديد في مشاريعك:​

بمجرد ما الكود يكون جاهز، تقدر تبدأ تستخدم الـ Hook ده في أي كومبوننت تاني. كل ما تحتاج حجم النافذة، ببساطة استدعي useWindowSize وهتلاقي الكود بيديك القيم مباشرةً.

7. جرب واختبر وشارك:​

بعد ما تخلص الـ Hook، جربه كويس واختبره في حالات متعددة. لو لقيته مفيد، شاركه مع زملائك أو حتى على GitHub عشان الناس تستفيد.