إزاي تبني Custom Hooks في رياكت وتخلص من تكرار الكود للأبد

أكيد مريت بالموقف ده قبل كده: قاعد شغال في مشروع React، وفجأة لقيت نفسك بتكتب نفس الـ logic بتاع الـ fetch للبيانات أو الـ validation في تلات أو أربع مكونات (Components) مختلفة. بتقعد تاخد الكود copy-paste، ولما تحب تعدل حاجة، بتضطر تلف على كل الملفات عشان تعدلها. ده بالضبط "الوجع" اللي بنسميه في البرمجة الـ Code Duplication أو تكرار الكود. الحل السحري اللي رياكت قدمتهولنا عشان نهرب من اللفة دي هو الـ Custom Hooks.

يعني إيه Custom Hooks وليه محتاجها؟

الـ Custom Hooks ببساطة هي دالة JavaScript عادية، بس الفرق إنك تقدر تستخدم جواها الـ Hooks الأساسية اللي رياكت بتقدمها زي useState أو useEffect. الهدف منها إنك "تغلف" المنطق البرمجي المتكرر (Business Logic) في دالة واحدة، تستدعيها في أي كومبوننت تاني، فتخلي الكود بتاعك نظيف، سهل القراءة، والأهم من كده، سهل الصيانة (Maintainable).

خطوات بناء أول Custom Hook ليك

عشان تعمل Hook مخصص، فيه قاعدة ذهبية لازم تمشي عليها: اسم الدالة لازم يبدأ بكلمة use. ده مش مجرد اختيار، ده عشان React تعرف إن ده Hook وتطبق عليه قوانين الـ Hooks المعروفة.

تخيل إننا عايزين نعمل Hook بسيط عشان نتعامل مع الـ Local Storage. بدل ما كل شوية تكتب localStorage.getItem و JSON.parse، هنعمل دالة اسمها useLocalStorage:

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue];
}

إزاي تستخدم الـ Custom Hook في مشروعك؟

دلوقتي بعد ما بنينا الـ Hook، استخدامه بقى أسهل من شربة المية. تقدر تستدعيه في أي Component بالشكل ده:

function UserSettings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      الوضع الحالي: {theme}
    </button>
  );
}

نصايح ذهبية عشان تكتب Hooks احترافية

• فصل المهام (Separation of Concerns): خلي الـ Hook بتاعك بيعمل حاجة واحدة بس (Single Responsibility). لو لقيت الـ Hook بقى ضخم، قسمه لـ Hooks أصغر.
• استخدم TypeScript: لو شغلك تقيل، استخدام الـ TypeScript مع الـ Hooks هيحميك من أخطاء كتير ويخلي الكود بتاعك واضح لأي حد هييجي يشتغل بعدك.
• التوثيق (Documentation): حتى لو الكود واضح، اكتب تعليق بسيط فوق الـ Hook بيشرح هو بياخد إيه (Parameters) وبيرجع إيه (Return Values).

خاتمة: نصيحة من أخ لمبرمج

بناء الـ Custom Hooks مش بس وسيلة لتنظيم الكود، ده تفكير "Architect" بيبدأ يتكون عندك. لما تعود نفسك تفكر في الكود كـ "أجزاء قابلة لإعادة الاستخدام"، مستوى شغلك هيتغير تماماً. ما تخافش تجرب وتغلط، وأي لوجيك تلاقيه اتكرر معاك مرتين تلاتة، فوراً فكر إزاي تحوله لـ Hook. البرمجة مهارة بتتبني بالتكرار والممارسة، وأنت قدها!