Custom Hooks في React: إعادة استخدام المنطق

في React، قد تكرر نفس المنطق في أكثر من مكوّن. بدل النسخ واللصق، يمكنك إنشاء Custom Hook.

ما هو Custom Hook في React؟

هو دالة تبدأ بـ use وتحتوي منطقًا قابلًا لإعادة الاستخدام.

التعريف البسيط: Custom Hook = منطق مشترك بدون تكرار.

مثال 1: Hook لعداد بسيط

import { useState } from "react";

function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const inc = () => setCount((c) => c + 1);
  const dec = () => setCount((c) => c - 1);
  return { count, inc, dec };
}

function Counter() {
  const { count, inc, dec } = useCounter(5);

  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={inc}>زيادة</button>
      <button onClick={dec}>نقصان</button>
    </div>
  );
}

هنا جمعنا منطق العدّاد في Hook واحد وأعدنا استخدامه داخل المكوّن.

الفكرة: بدل كتابة useState وأزرار الزيادة والنقصان في كل مكوّن، وضعنا المنطق داخل useCounter. الآن أي مكوّن يمكنه استدعاء هذا الـ Hook والحصول على نفس الوظائف مباشرة.

مثال 2: Hook لجلب بيانات

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((json) => setData(json))
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading };
}

function Users() {
  const { data, loading } = useFetch("https://jsonplaceholder.typicode.com/users");

  if (loading) return <p>جاري التحميل...</p>;

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

هنا أنشأنا Hook عام للجلب، ثم استخدمناه في مكوّن Users.

الخطوات واضحة: useFetch يستقبل رابطًا، يبدأ بـ loading = true، ثم يجلب البيانات ويخزنها في data، وأخيرًا يوقف التحميل. هذا يجعل مكوّن Users بسيطًا ومركّزًا على العرض فقط.

متى تستخدم Custom Hooks؟

• عند تكرار نفس المنطق في أكثر من مكوّن.
• لتبسيط المكوّنات وجعلها تركّز على UI.
• لتسهيل الاختبار والتنظيم.

أخطاء شائعة

• إنشاء Hook لا يُعاد استخدامه فعليًا.
• نسيان اسم يبدأ بـ use.
• وضع Hooks داخل شروط أو حلقات.

الأسئلة الشائعة — FAQ

ما هو Custom Hook في React؟

دالة تبدأ بـ use وتحتوي منطقًا قابلًا لإعادة الاستخدام.

متى أحتاج Custom Hook؟

عندما تكرر نفس المنطق في أكثر من مكوّن.

هل يمكن أن يحتوي Custom Hook على useEffect؟

نعم، أي Hook يمكن استخدامه داخل Custom Hook إذا اتبعت القواعد.

هل Custom Hook بديل عن المكوّنات؟

لا، هو لإعادة استخدام المنطق فقط.

لماذا يجب أن يبدأ باسم use؟

حتى يتعرف React على أنه Hook ويطبّق قواعد Hooks.