استفاده از Hookها در ReactJS باعث می‌شود تا اضافه کردن قسمتی از یک State به کامپوننت ساده‌تر انجام شود. همین طور در صورتی که از Custom Hook استفاده کنیم، توابع مرتب‌تری خواهیم داشت.

فرض کنید برای دیده شدن یک متن در برنامه، به یک نتیجه True یا False نیاز داریم. کد ما به این صورت خواهد بود:

import React, { useState } from 'react';

function SpoilerAlert({ spoilerText }) {
  const [isVisible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'}
      </button>
      {isVisible && <span>{spoilerText}</span>
    </div>
  );
}

در این مثال تابع useState برای مدیریت State برنامه کار پیچیده‌ای را انجام نمی‌دهد. اینجا استفاده از useState اشتباه نیست، اما کد برنامه بهتر هم می‌تواند باشد:

import React, { useState } from 'react';

function SpoilerAlert({ spoilerText }) {
  // useToggle doesn't exist yet, but what if it did?
  const [isVisible, toggleVisible] = useToggle(false);

  return (
    <div>
      <button onClick={toggleVisible}>
        {isVisible ? 'Hide' : 'Show'}
      </button>
      {isVisible && <span>{spoilerText}</span>
    </div>
  );
}

یک تغییر کوچک صورت گرفته است، اما کد خواناتری داریم. مقدار Prop در ایونت onClick به صورت اختصاصی بهتر نوشته شده است.

Custom Hook توابع عادی هستند

ما می‌توانیم تمام منطقی که برای توسعه یک Hook لازم است را در یک تابع بنویسیم. این کار توسعه هوک‌های اختصاصی یا همان Custom Hook است. صرفا کافیست قبل از نام تابع عبارت از use استفاده کنیم.

توسعه Custom Hook به اندازه‌ای ساده‌ است که بعد از یادگیری، بیشتر از این توابع اختصاصی برای توسعه برنامه استفاده خواهیم کرد. همین طور در نتیجه کد داینامیک‌تری خواهیم داشت.

در این مثال، تابع useToggle یک فراخوانی است از تابع useState. اما در کنار مدیریت State، تابعی را توسعه داده‌ایم که برای نیازهای دیگر هم می‌تواند کاربردی باشد.

یک مثال دیگر، تابع useBoolian

برای درک بهتر Custom Hook، یک مثال دیگر را بررسی می‌کنیم. در این مثال به جای استفاده از Toggle، یک مقدار مشخص ON و OFF را برای خروجی در نظر خواهیم داشت. فرض کنید یک باکس مودال را با کلیک باز و بسته می‌کنیم. برای ساخت Boolian، مقداردهی اولیه useState به این صورت خواهد بود:

const [isVisible, setVisible] = useState(initialValue);

بعد به کمک یک سری توابع، مقدار State را به روز رسانی خواهیم کرد:

const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);

اگر بخواهیم این منطق را با استفاده از Custom Hook توسعه دهیم، کد ما به این صورت می‌شود:

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

  const setTrue = () => setValue(true);
  const setFalse = () => setValue(false);

  return [value, setTrue, setFalse];
}

در واقع توسعه Custom Hook باعث می‌شود که کد برنامه ساده‌تر و کوتاه‌تر باشد. تمام کاری که انجام دادیم، State و توابع کمکی را در یک تابع قرار دادیم و می‌توانیم از این کامپوننت به این شکل استفاده کنیم:

const [isVisible, showModal, hideModal] = useBoolean(initialValue);

در این صورت توابع باز هم قابل استفاده خواهند بود و کد داینامیک‌تری داریم.

در دوره جامع MERN Stack، برای توسعه Hookهای مربوط به فرم، از Custom Hook استفاده کردیم. به همین دلیل در نرم افزار، هر جا که نیاز به استفاده از فرم داشته باشیم، می‌توانیم از توابعی که قبلا توسعه داده‌ایم استفاده کنیم.