إنشاء خطافات مخصصة (Custom Hooks) في تطبيقات React

تُعد خطافات React (Hooks) من أهم الابتكارات التي أُدخلت على مكتبة React منذ إصدارها في النسخة 16.8، حيث أضافت طريقة جديدة للتعامل مع حالة المكونات (state) والتأثيرات الجانبية (side effects) بطريقة أبسط وأكثر مرونة. من بين هذه الخطافات نجد الخطافات المخصصة (Custom Hooks)، التي تسمح للمطورين بإعادة استخدام المنطق الوظيفي المشترك عبر مكونات متعددة بطريقة منظمة ونظيفة.

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

مفهوم الخطافات في React

قبل الخوض في الخطافات المخصصة، من الضروري فهم ما هي الخطافات (Hooks) بشكل عام. الخطافات هي وظائف تسمح لك باستخدام حالة React وميزات دورة حياة المكون داخل مكونات الوظائف (Functional Components) بدون الحاجة لاستخدام المكونات الكلاسيكية (Class Components).

أشهر الخطافات التي تأتي مع React هي:

• useState لإدارة الحالة.

• useEffect للتعامل مع التأثيرات الجانبية.

• useContext للوصول إلى القيم من سياق React.

• useReducer لإدارة الحالة المعقدة.

تأتي الخطافات المخصصة في هذا السياق لتسمح للمطورين بتجميع المنطق القابل لإعادة الاستخدام في وظائف يمكن استدعاؤها ضمن أي مكون، مما يجعل الكود أكثر تنظيماً وأقل تكراراً.

ما هي الخطافات المخصصة (Custom Hooks)؟

الخطافات المخصصة هي ببساطة وظائف JavaScript تبدأ بـ use وتستخدم الخطافات المدمجة داخلها، بالإضافة إلى أي منطق برمجي تود إعادة استخدامه بين مكونات React المختلفة. هذه الخطافات لا ترتبط بأي مكون بعينه، بل يمكن استدعاؤها في أي مكون وظيفي لتوفير وظائف معينة.

أهمية الخطافات المخصصة

1. إعادة استخدام المنطق البرمجي: عندما تحتاج إلى تكرار جزء من المنطق في مكونات متعددة، بدلاً من تكرار الكود، تقوم بإنشاء خطاف مخصص يحتوي هذا المنطق ويُعاد استخدامه.

2. تنظيم الكود: يفصل الخطاف المخصص المنطق الوظيفي عن العرض (UI)، مما يجعل المكونات أكثر نقاءً وتركيزاً على العرض فقط.

3. سهولة الاختبار: يمكن اختبار الخطافات المخصصة بشكل مستقل عن المكونات، مما يسهل الحفاظ على جودة الكود.

4. التعامل مع تعقيدات الحالة: يمكن للخطافات المخصصة تبسيط إدارة الحالات المعقدة أو التعامل مع التأثيرات الجانبية المتعددة بطريقة منظمة.

متطلبات الخطافات المخصصة

لتكوين خطاف مخصص صالح، يجب الالتزام ببعض القواعد:

• يجب أن تبدأ دالة الخطاف باسم use لتتمكن React من تتبع حالة الخطاف.

• يمكن للخطاف أن يستخدم خطافات أخرى (مثل useState، useEffect).

• يجب استدعاؤه فقط داخل مكونات React أو خطافات أخرى، وليس في أي مكان آخر.

كيفية إنشاء خطاف مخصص: خطوات ومثال عملي

1. تحديد الهدف

أول خطوة هي تحديد المنطق أو الوظيفة التي تريد إعادة استخدامها عبر مكونات متعددة. مثلاً، تخيل أننا نرغب في إنشاء خطاف مخصص لإدارة حالة التمرير (scroll position) في النافذة.

2. كتابة الخطاف

jsx
CopyEdit
import { useState, useEffect } from 'react';

function useScrollPosition() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    function handleScroll() {
      setScrollPosition(window.pageYOffset);
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return scrollPosition;
}

شرح الخطاف

• الحالة: يحتوي الخطاف على حالة scrollPosition التي تخزن قيمة التمرير الحالية.

• التأثير: يستخدم useEffect لإضافة مستمع حدث التمرير عند تركيب المكون، وإزالته عند إلغاء التركيب.

• الإرجاع: يُعيد الخطاف قيمة موقع التمرير الحالي التي يمكن لأي مكون استهلاكها.

3. استخدام الخطاف في مكون

jsx
CopyEdit
function ScrollDisplay() {
  const scrollY = useScrollPosition();

  return <div>موقع التمرير الحالي: {scrollY}pxdiv>;
}

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

أمثلة على خطافات مخصصة شائعة الاستخدام

خطاف مخصص لإدارة حالة الإدخال (Input State)

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

jsx
CopyEdit
import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(event) {
    setValue(event.target.value);
  }

  return {
    value,
    onChange: handleChange,
  };
}

الاستخدام

jsx
CopyEdit
function Form() {
  const nameInput = useInput('');
  const emailInput = useInput('');

  return (
    <form>
      <input type="text" {...nameInput} placeholder="الاسم" />
      <input type="email" {...emailInput} placeholder="البريد الإلكتروني" />
    form>
  );
}

خطاف مخصص للتعامل مع البيانات من API

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

jsx
CopyEdit
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    setError(null);

    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error('فشل تحميل البيانات');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

الاستخدام

jsx
CopyEdit
function UserList() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>جارٍ التحميل...p>;
  if (error) return <p>حدث خطأ: {error}p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}li>
      ))}
    ul>
  );
}

بنية الخطافات المخصصة المتقدمة

في بعض التطبيقات المعقدة، قد تحتاج إلى خطافات مخصصة تتعامل مع حالات متقدمة مثل التزامن بين حالات متعددة أو التعامل مع WebSocket، أو حتى إدارة الحالة المعقدة باستخدام useReducer.

مثال على خطاف مخصص يستخدم useReducer

jsx
CopyEdit
import { useReducer, useEffect } from 'react';

const initialState = {
  loading: false,
  error: null,
  data: null,
};

function dataFetchReducer(state, action) {
  switch (action.type) {
    case 'FETCH_INIT':
      return { ...state, loading: true, error: null };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      throw new Error();
  }
}

function useDataApi(initialUrl) {
  const [url, setUrl] = useState(initialUrl);
  const [state, dispatch] = useReducer(dataFetchReducer, initialState);

  useEffect(() => {
    let didCancel = false;

    async function fetchData() {
      dispatch({ type: 'FETCH_INIT' });

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('فشل في جلب البيانات');
        }
        const result = await response.json();

        if (!didCancel) {
          dispatch({ type: 'FETCH_SUCCESS', payload: result });
        }
      } catch (error) {
        if (!didCancel) {
          dispatch({ type: 'FETCH_FAILURE', payload: error.message });
        }
      }
    }

    fetchData();

    return () => {
      didCancel = true;
    };
  }, [url]);

  return [state, setUrl];
}

نصائح وأفضل ممارسات عند إنشاء الخطافات المخصصة

• إعطاء أسماء واضحة ومحددة: اسم الخطاف يجب أن يعبر بدقة عن الوظيفة التي يقوم بها.

• عدم تضمين منطق العرض داخل الخطاف: الخطافات يجب أن تركز فقط على المنطق، أما الواجهة فيكون مسؤول عنها المكون.

• تجنب استخدام الخطافات المخصصة داخل شروط أو حلقات: يجب استدعاء الخطافات دائمًا بنفس الترتيب لضمان عمل React بشكل صحيح.

• كتابة خطافات صغيرة ومحددة: تقسيم المنطق إلى أجزاء صغيرة يساعد على إعادة الاستخدام والتحكم.

• توثيق الخطافات: شرح مدخلات ومخرجات الخطاف لتسهيل فهمه واستخدامه من قبل فريق التطوير.

• التحقق من الأداء: في حال استخدام الخطاف في مكونات كثيرة أو تطبيقات كبيرة، يجب الانتباه إلى تأثيراته على الأداء.

• التعامل مع التنظيف (cleanup): التأكد من إزالة المستمعين أو التايمرات أو أي موارد تم إنشاؤها داخل الخطاف عند إلغاء تركيب المكون لتجنب تسرب الذاكرة.

تأثير الخطافات المخصصة على بنية التطبيقات

وجود خطافات مخصصة يؤثر بشكل إيجابي على بنية تطبيقات React بطرق عدة:

• تقليل التكرار (DRY principle): إذ يقلل من تكرار نفس الكود في مكونات متعددة.

• فصل الاهتمامات (Separation of Concerns): حيث يفصل منطق البيانات عن منطق العرض.

• سهولة الصيانة والتطوير: بما أن الخطاف يتم تحديثه في مكان واحد، فإن أي تعديل يشمل جميع الاستخدامات.

• تعزيز التعاون: يمكن لفريق التطوير بناء مكتبة من الخطافات المخصصة التي تستخدم عبر عدة مشاريع.

مقارنة بين الخطافات المخصصة والطرق التقليدية

قبل ظهور الخطافات المخصصة

في الماضي، كان يتم استخدام المكونات الكلاسيكية أو الأنماط مثل Higher-Order Components (HOCs) و Render Props لإعادة استخدام المنطق. لكنها كانت تؤدي إلى:

• تعقيد أكبر في الكود.

• صعوبة في تتبع سير البيانات.

• كثرة طبقات التغليف مما يؤدي إلى مشاكل في الأداء وأخطاء في التوافق.

مع الخطافات المخصصة

• الوضوح والبساطة: الخطافات المخصصة تسمح بإعادة استخدام المنطق بشكل مباشر داخل المكونات.

• سهولة التركيب: يمكن دمج عدة خطافات مخصصة داخل مكون واحد دون تعقيد.

• تحسين الأداء: بفضل عدم إنشاء طبقات إضافية، يقل الحمل على التكوين (rendering).

استخدام الخطافات المخصصة في مشاريع كبيرة

في المشاريع ذات الحجم الكبير، يمكن بناء مكتبة داخلية من الخطافات المخصصة التي تغطي الوظائف الشائعة مثل:

• التعامل مع النماذج.

• استدعاء واجهات برمجة التطبيقات (APIs).

• التعامل مع المصادقة.

• إدارة التوقيت (Timers).

• التعامل مع وسائل الإعلام (Media Queries).

• إدارة الحالة العالمية (Global State) عبر useContext.

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

أمثلة متقدمة على الخطافات المخصصة

1. خطاف مخصص لإدارة المصادقة

jsx
CopyEdit
import { useState, useEffect } from 'react';

function useAuth() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // افترض وجود API للمصادقة يعيد بيانات المستخدم
    async function fetchUser() {
      const response = await fetch('/api/current-user');
      if (response.ok) {
        const data = await response.json();
        setUser(data);
      } else {
        setUser(null);
      }
    }

    fetchUser();
  }, []);

  function logout() {
    setUser(null);
    // يمكن تنفيذ عملية تسجيل الخروج هنا
  }

  return { user, logout };
}

2. خطاف مخصص لإدارة حالة النافذة (Window Size)

jsx
CopyEdit
import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return size;
}

تأثير الخطافات المخصصة على تحسين تجربة المستخدم

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

جدول مقارنة بين استخدام الخطافات المدمجة والخطافات المخصصة

الخلاصة

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

تستحق الخطافات المخصصة كل الاهتمام في رحلتك مع React، فهي المفتاح لكتابة تطبيقات عالية الجودة تحافظ على نظافة الكود وتوفر تجربة مستخدم متقدمة ومستقرة.

المصادر والمراجع

• React Official Documentation – Hooks

• Building Your Own Hooks – React Docs