چگونه در ری‌اکت یک Custom Hook بسازیم؟

در React، Custom Hook یک تابع جاوا اسکریپتی است که می‌توانید آن را برای استفاده مجدد از منطق و وضعیت‌ها (state) در کامپوننت‌ها ایجاد کنید. هدف از Custom Hook این است که کدهایی را که به دفعات در کامپوننت‌های مختلف استفاده می‌شوند، به صورت یکجا جمع‌آوری کرده و آن‌ها را مجدداً استفاده کنید. این کار باعث می‌شود که کدتان تمیزتر و قابل نگهداری‌تر شود.

چگونه Custom Hook بسازیم؟

برای ساختن یک Custom Hook باید فقط یک تابع بسازید که معمولاً از هوک‌های React (مثل useState، useEffect و غیره) استفاده می‌کند. نام این تابع معمولاً با use شروع می‌شود تا نشان دهد که این یک هوک است.

مثال ساده از یک Custom Hook

فرض کنید می‌خواهیم یک Custom Hook برای مدیریت شمارش ایجاد کنیم:

import { useState } from 'react';

// Custom Hook برای شمارش

function useCounter(initialValue = 0) {

  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);

  const decrement = () => setCount(count - 1);

  const reset = () => setCount(initialValue);

  // برمی‌گردانیم یک آبجکت با متغیرها و توابع

  return { count, increment, decrement, reset };

}

export default useCounter;

در اینجا، useCounter یک Custom Hook است که وضعیت شمارش (count) را مدیریت می‌کند و توابعی برای افزایش، کاهش و ریست کردن آن فراهم می‌آورد.

استفاده از Custom Hook در کامپوننت

حالا می‌توانیم از این هوک در هر کامپوننت React استفاده کنیم:

import React from 'react';

import useCounter from './useCounter';

function Counter() {

  const { count, increment, decrement, reset } = useCounter(0);

  return (

    <div>

      <h1>Count: {count}</h1>

      <button onClick={increment}>Increment</button>

      <button onClick={decrement}>Decrement</button>

      <button onClick={reset}>Reset</button>

    </div>

  );

}

export default Counter;

چه زمانی باید Custom Hook بسازیم؟

شما باید از Custom Hook استفاده کنید وقتی که:

1. منطق مشترک بین چند کامپوننت وجود داشته باشد:

اگر چند کامپوننت نیاز دارند که وضعیت مشابهی را مدیریت کنند یا از یک منطق مشابه استفاده کنند (مثلاً دسترسی به API یا مدیریت ورودی‌ها)، می‌توانید آن منطق را در یک Custom Hook قرار دهید.

2. کاهش کد تکراری:

اگر در چندین کامپوننت مشابه از همان هوک‌ها یا منطق استفاده می‌کنید، می‌توانید آن را به یک Custom Hook تبدیل کنید تا کدتان تمیزتر و قابل نگهداری‌تر باشد.

3. تفکیک منطق از UI:

شما می‌توانید منطق را از قسمت‌های رابط کاربری (UI) جدا کنید و در هوک‌ها نگه دارید. این کار باعث می‌شود کدتان از نظر ساختاری بهتر و قابل فهم‌تر باشد.

چگونه با استفاده از Custom Hook ها کدهای قابل استفاده مجدد بنویسیم؟

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

مثال: Custom Hook برای درخواست‌های API

فرض کنید می‌خواهید یک Custom Hook بسازید که داده‌ها را از یک API بارگذاری کند و در چند کامپوننت از آن استفاده کنید:

import { useState, useEffect } from 'react';

function useFetch(url) {

  const [data, setData] = useState(null);

  const [loading, setLoading] = useState(true);

  const [error, setError] = useState(null);

  useEffect(() => {

    const fetchData = async () => {

      try {

        const response = await fetch(url);

        const result = await response.json();

        setData(result);

      } catch (err) {

        setError(err);

      } finally {

        setLoading(false);

      }

    };

    fetchData();

  }, [url]); // هر زمان که url تغییر کند، داده‌ها مجدداً بارگذاری می‌شوند

  return { data, loading, error };

}

export default useFetch;

حالا می‌توانید از این Custom Hook در هر کامپوننتی استفاده کنید:

import React from 'react';

import useFetch from './useFetch';

function DataDisplay() {

  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <div>Loading...</div>;

  if (error) return <div>Error: {error.message}</div>;

  return (

    <div>

      <h1>Data:</h1>

      <pre>{JSON.stringify(data, null, 2)}</pre>

    </div>

  );

}

export default DataDisplay;

چند نکته مهم:

1. State و Effect داخل Custom Hook:

Custom Hook‌ها می‌توانند از useState, useEffect, useReducer, و سایر هوک‌های React استفاده کنند.

2. بازگشت چند مقدار:

شما می‌توانید از تخلیص اشیاء یا آرایه‌ها برای بازگرداندن چندین مقدار از یک Custom Hook استفاده کنید تا داده‌های مختلفی را به کامپوننت‌های مختلف ارسال کنید.

3. Custom Hook ها باید فقط تابعی باشند که نام آن با use شروع شود:

این یک قاعده است که React از آن برای شناسایی هوک‌ها استفاده می‌کند.

نتیجه‌گیری:

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

استفاده از Custom Hooks باعث کاهش تکرار کد و سازماندهی بهتر برنامه‌های پیچیده می‌شود.

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