هوک‌ها در React

هوک‌ها در React

هوک‌ها (Hooks) یکی از مهم‌ترین ویژگی‌های React هستند که از نسخه 16.8 به این کتابخانه اضافه شدند. با کمک هوک‌ها می‌توانیم در کامپوننت‌های تابعی از قابلیت‌هایی مثل state، lifecycle و context استفاده کنیم؛ درحالی‌که قبلاً فقط در کامپوننت‌های کلاس این امکانات در دسترس بود.

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

معرفی useState و useEffect

useState

برای مدیریت وضعیت (state) در یک کامپوننت تابعی:

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      
شمارنده: {count}
       setCount(count + 1)}>افزایش
    
  );
}

مقدار اولیه درون useState تعریف می‌شود.

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

useEffect

برای انجام عملیات جانبی (مانند فراخوانی API، تنظیم تایمر، یا تغییر عنوان صفحه):

import { useEffect } from 'react';
useEffect(() => {
  document.title = "شمارنده اجرا شد";
}, [count]);

پارامتر دوم (آرایه وابستگی) مشخص می‌کند که اثر چه زمانی اجرا شود.

اگر آرایه خالی باشد، فقط یک بار (مانند componentDidMount) اجرا می‌شود.

useRef، useMemo، useCallback

useRef

برای دسترسی مستقیم به DOM یا ذخیره مقدار بدون ری‌رندر:

const inputRef = useRef();
 inputRef.current.focus()}>تمرکز روی ورودی

useMemo

برای جلوگیری از محاسبات تکراری سنگین:

const expensiveValue = useMemo(() => heavyCalculation(num), [num]);

فقط زمانی که num تغییر کند، heavyCalculation دوباره اجرا می‌شود.

useCallback

برای جلوگیری از تعریف دوباره توابع در هر ری‌رندر:

const handleClick = useCallback(() => {
  console.log("کلیک شد");
}, []);

باعث بهینه‌سازی در ترکیب با memo یا فرزندهایی که props آن‌ها تابع است می‌شود.

قوانین استفاده از هوک‌ها

React دو قانون اصلی برای استفاده از هوک‌ها دارد:

1- فقط در سطح بالا (Top-Level): هوک‌ها را داخل توابع، شرط‌ها یا حلقه‌ها قرار ندهید.

2- فقط در کامپوننت‌های تابعی یا Custom Hooks استفاده کنید. نه در توابع معمولی یا کلاس‌ها.

اگر این قوانین را رعایت نکنید، رفتار کامپوننت ممکن است غیرقابل پیش‌بینی شود.

Custom Hooks چیست و چرا استفاده می‌کنیم؟

Custom Hook در واقع تابعی است که از یک یا چند هوک استفاده می‌کند تا یک قابلیت قابل استفاده مجدد بسازد.

مثال ساده:

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return width;
}
// استفاده:
const width = useWindowWidth();

مزایا:

کاهش تکرار کد

افزایش خوانایی و تفکیک وظایف

تست‌پذیری بالا

جمع‌بندی

در این فصل با مهم‌ترین هوک‌های React یعنی useState، useEffect، useRef، useMemo و useCallback آشنا شدیم. همچنین قوانین مهم استفاده از هوک‌ها و قدرت Custom Hookها را بررسی کردیم.