Custom Hook ری اکت ! چطور هوک اختصاصی خودمون رو بسازیم ؟

هوک اختصاصی ری اکت یا همون Custom Hook ری اکت یکی از خفن ترین قابلیت های React هست که به ما اجازه میده یک تیکه کد رو بین کامپوننت های مختلف به اشتراک بزاریم و در واقع یک هوک مطابق نیاز خودمون داشته باشیم.

تو نسخه 16.8 ری اکت هوک های کاربردی و فوق العاده ای به React معرفی شد . هر کدوم از این Hook ها کار خاصی برای ما انجام میدن.

مثلا هوک useEffect برای مدیریت Side Effect هست یا هوک useCallback برای بهبود Performance اپیکیشن هست.

اما ممکنه به یه هوک جدید احتیاج داشته باشیم که کار خاصی انجام بده و این هوک تا به امروز وجود نداشته باشه.

مثلا :

هوک برای دریافت اطلاعات از سرور ( Data Fetching )
هوک برای تشخیص آنلاین یا آفلاین بودن کاربر در ری اکت
هوک برای Copy کردن یه چیزی تو clipboard کاربر

خود React این هوک ها رو نساخته و به ما ارائه نداده ! اما ری اکت به ما این امکان رو داده که برای خودمون هوک بسازیم 🙂

ساخت هوک اختصاصی در ری اکت ( React Custom Hook )

ری اکت به ما این اجازه رو داده که طبق نیاز خودمون بتونیم هوک های جدید بسازیم و تو پروژمون ازش استفاده کنیم.

مثلا یک هوک با نام useFetchData برای دریافت اطلاعات از سرور ( اسم این هوک هر چیزی میتونه باشه )

چرا از Custom Hook ری اکت استفاده کنیم ؟

هوک اختصاصی ری اکت ( Custom Hook ها ) به ما اجازه Share کردن یک منطق ( Logic ) بین کامپوننت های مختلف رو میدن. در واقع ما برای یک نیاز مشخص یک هوک میسازیم و از اون هوک در کامپوننت های مختلف استفاده میکنیم.

مثلا فرض کنید یک پروژه چت آنلاین داریم و نیازه که توی بخش های مختلف وبسایت ، وضعیت آنلاین یا آفلاین بودن کاربر رو چک کنیم.

برای چک کردن وضعیت آنلاین / آفلاین بودن کاربر در هر صفحه باید یک State برای ذخیره کردن وضعیت شبکه کاربر و useEffect برای مدیریت Side Effect داشته باشیم . یعنی بین re-Render های مختلف وضعیت شبکه کاربر را بررسی و در یک State ذخیره کنیم.

مطابق کد زیر :

				
					import { useState, useEffect } from 'react';

export default function SaveButton() {
  const [isOnline, setIsOnline] = useState(true); // برای ذخیره کردن وضعیت آنلاین بودن کاربر
  
  useEffect(() => {
    function handleOnline() { // تابع جهت ذخیره آنلاین بودن کاربر
      setIsOnline(true);
    }
    function handleOffline() {// تابع جهت ذخیره کردن آفلاین بودن کاربر
      setIsOnline(false);
    }
    // 2 Event Listener For Check Network Status
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    // Remve Event Listeners When user goes to Another Page
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  function handleSaveClick() {
    console.log('✅ اطلاعات ذخیره شد');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'ذخیره اطلاعات' : 'Reconnecting...'}
    </button>
  );
}

تو تیکه کد بالا ما یک دکمه داریم و میخوایم فقط زمانیکه کاربر آنلاین بود ، امکان کلیک روی این دکمه و انجام عملیات رو داشته باشه.

برای همین دو Event Listener در خط 14 و 15 اضافه کردیم که وضعیت شبکه رو چک کنن و درصورتی که کاربر آنلاین یا آفلاین بود ، وضعیت شبکه رو در State ذخیره کنن.

تو خط 28 یک دکمه داریم که درصورت آفلاین بودن کاربر ( بر اساس State ذخیره شده ) غیرفعال میشه.

تو خط 17 هم گفتیم هرزمان این کامپوننت از DOM حذف شد ، Event Listtener هارو حذف کن. ( اگه با useEffect آشنایی ندارید مقاله هوک useEffect ری اکت رو مطالعه کنید )

مشکل تیکه کد بالا چیه ؟

تیکه کدی که بالاتر نوشتیم برای بررسی وضعیت شبکه کاربر در React ، به خوبی کار میکنه و هیچ مشکلی نداره .

اما فرض کنید تو تمامی صفحات نیاز داشته باشیم وضعیت شبکه کاربر رو چک کنیم. اینجوری باید در تمامی صفحات ، تیکه کد بالا رو تکرار کنیم!

پروژمون خیلی کثیف و شلوغ میشه و این اصلا فکر خوبی نیست.

راه حل ساخت یک Custom Hook برای بررسی وضعیت شبکه کاربر و استفاده از این هوک در صفحات مورد نیاز هست 🙂

با این روش در صفحاتی که نیاز به بررسی وضعیت شبکه کاربر داریم ، فقط هوک اختصاصی خودمون رو import و استفاده میکنیم.

یعنی یک Logic رو یکبار مینویسیم و در صفحات مختلف ازش استفاده میکنیم. به اینکار میگیم هوک اختصاصی در React !

ساخت کاستوم هوک در React !

فرض کنید همانند سایر هوک های داخلی ری اکت مثل useState و useReducer یک هوک مثل useNetworkStatus برای بررسی وضعیت آنلاین یا آفلاین بودن کاربر وجود داشت! خب قطعا چنین هوکی رو React برای ما نساخته اما میتونیم خودمون این هوک رو بسازیم و ازش استفاده کنیم.

اگه هوک useNetworkStatus رو بسازیم ، یجای تیکه کد بالا که خیلی شلوغ و زیاده میتونیم اینجوری ازش استفاده کنیم:

				
					function StatusBar() {
  const isOnline = useNetworkStatus();
  return <h1>{isOnline ? "آفلاین" : "آنلاین"}</h1>;
}

function SaveButton() {
  const isOnline = useNetworkStatus();

  function handleSaveClick() {
    console.log('✅ Progress saved');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Save progress' : 'Reconnecting...'}
    </button>
  );
}

تو تیکه کد بالا هوک useNetworkStatus رو Import کردیم و ازش استفاده کردیم. این هوک وضعیت آنلاین یا آفلاین بودن کاربر رو به ما نشون میده .

اما این هوک از react فراخوانی نشده! این هوک رو خودمون بصورت زیر ساختیم :

				
					function useNetworkStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

تو تیکه کد بالا یک Hook به اسم useNetworkStatus ساختیم که وضعیت شبکه کاربر رو بررسی میکنه.

خب این عالیه !

چون دیگه نیازی نیست تیکه کد بالا رو تو هر صفحه و کامپوننت بنویسیم ! فقط کافیه هوک بالا رو Import و ازش استفاده کنیم.

تو تیکه کد زیر ، هوک useNetworkStatus رو فراخوانی کردیم و تونستیم آنلاین یا آفلاین بودن کاربر رو ببینیم :

				
					import { useNetworkStatus } from './useNetworkStatus.js';

function StatusBar() {
  const isOnline = useNetworkStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

function SaveButton() {
  const isOnline = useNetworkStatus();

  function handleSaveClick() {
    console.log('✅ Progress saved');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Save progress' : 'Reconnecting...'}
    </button>
  );
}

export default function App() {
  return (
    <>
      <SaveButton />
      <StatusBar />
    </>
  );
}

اگه تیکه کد های پرکاربرد خودتون رو به یک هوک تبدیل کنید ، دیگه از تیکه کد های تکراری داخل بخش های مختلف اپیکیشن خودتون استفاده نمیکنید!

پروژه خیلی منظم تر و بهینه تر میشه وقتی Logic های پرکاربرد رو به هوک ها تبدیل کنید.

قوانین هوک در ری اکت !

برای اینکه Custom Hook ری اکت بسازید باید قانون هوک ها رو رعایت کنید :

اسم هوک باید با use شروع بشه و capital باشه مثل useRef
هوک ها باید Top Level فراخوانی بشن. مثلا داخل Loop نمیتونید فراخوانیشون کنید.
هوک هارو فقط داخل کامپوننت های ری اکت میشه فراخوانی کرد.
هوک هارو نمیشه داخل توابع معمولی جاوا اسکریپتی فراخوانی کرد ( regular js )

اینجوری وقتی به یک اسم تو پروژتون برمیخورید میتونید مطمئن بشید که با یک هوک سر و کار دارید یا نه.

مثلا UseFetchData قطعا یک هوک نیست چون بصورت capital نوشته نشده.

چه زمانی از Custom Hook در React استفاده کنیم؟

قبل از هرچیز باید یادمون باشه که هر تیکه کد تکراری رو نباید تبدیل به یک Hook کنیم!

معمولا Effect ها مورد های مناسبی برای تبدیل شدن به هوک هستن.

مثلا useFetchData برای دریافت اطلاعات از سرور.

مثلا useLocalStorage برای کار با لوکال استوریج مرورگر.

جمع بندی

تو این مقاله در مورد هوک سفارشی ری اکت ( Custom Hook در React ) صحبت کردیم .

گفتیم که بهتره Logic هایی که Effect دارن و قراره تو کامپوننت های مختلفی استفاده بشن رو به هوک اختصاصی در React تبدیل کنیم ( مثل ارتباط با سرور یا ارتباط با local storage و ..)

استفاده از Custom Hook ری اکت باعث میشه خوانایی کد ما خیلی بیشتر بشه و دیگه نیازی به نوشتن کد تکراری در هر کامپوننت نداشته باشیم. در واقع یک تیکه کد پرکاربرد رو یکبار مینویسیم و هرجا بهش نیاز داشتیم صرفا اونو فراخوانی میکنید 🙂

امیدوارم که از قابلیت هوک سفارشی ری اکت تو پروژتون بهترین استفاده رو بکنید و ممنونم که با فِرانت اِندی همراه بودید 🙂