Hookها چه هستند و چرا وجود دارند

Hookها چه هستند و چرا در React معرفی شدند

در فصل‌های قبلی، بارها با useState کار کردیم بدون اینکه دقیق توضیح دهیم این تابع دقیقاً چه نوع ابزاری است. از این فصل به بعد، به‌طور مستقیم به سراغ Hookها می‌رویم: این‌که Hook دقیقاً چیست، چرا React آن‌ها را معرفی کرد، و چه قوانینی برای استفاده از آن‌ها وجود دارد.

Hook چیست

Hook یک تابع جاوااسکریپتی معمولی است، با یک ویژگی خاص: نامش همیشه با کلمه use شروع می‌شود (مانند useState یا useEffect) و به یک Function Component اجازه می‌دهد به قابلیت‌های داخلی React، مانند State یا چرخه رندر، «متصل» یا Hook شود. این همان دلیل نام‌گذاری آن است: Hook یعنی قلاب زدن به یک قابلیت React از داخل یک تابع.

مشکلی که Hookها حل کردند

پیش از معرفی Hookها، تنها راه داشتن State یا واکنش به چرخه حیات یک کامپوننت (مانند اجرای کدی پس از قرار گرفتن در صفحه)، استفاده از Class Components بود. Function Componentها در آن زمان فقط می‌توانستند Props دریافت کنند و JSX بازگردانند؛ هیچ‌گونه State یا رفتار دیگری نداشتند.

این محدودیت باعث چند مشکل عملی می‌شد:

منطقی مانند «واکنش به تغییر یک مقدار» یا «اشتراک در یک منبع خارجی» بین چند کلاس مختلف، به‌سختی قابل استفاده مجدد بود.
کدهای مرتبط با یک قابلیت واحد (مثلاً اتصال و قطع اتصال از یک سرویس) اغلب در چند متد جداگانه از چرخه حیات کلاس (مانند componentDidMount و componentWillUnmount) پخش می‌شدند، به‌جای اینکه کنار هم باشند.
Class Componentها نحو پیچیده‌تری داشتند و مفاهیمی مانند this در جاوااسکریپت، منبع رایج اشتباه برای تازه‌کارها بود.

راه‌حل: آوردن قابلیت‌های کلاس به داخل توابع

Hookها این امکان را فراهم کردند که Function Componentها هم بتوانند State داشته باشند، به رویدادهای چرخه حیات واکنش نشان دهند، و منطق مرتبط با یک قابلیت را در یک‌جا، به‌جای پخش‌شدن در چند متد مختلف، بنویسند. برای مثال:

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return <p>{seconds} ثانیه</p>;
}

در این کد، هم تعریف State (useState) و هم منطق مرتبط با شروع و پایان یک تایمر (useEffect) کاملاً به‌عنوان توابع معمولی، داخل یک Function Component نوشته شده‌اند؛ بدون نیاز به تعریف یک کلاس.

Hookها امکان استفاده مجدد از منطق را هم فراهم کردند

یکی دیگر از مزیت‌های مهم Hookها این است که می‌توان منطق مرتبط با State و رفتار را در قالب یک تابع جداگانه استخراج کرد و در چند کامپوننت مختلف استفاده کرد؛ این قابلیت با نام Custom Hooks شناخته می‌شود و در فصل ۱۰ با جزئیات کامل آن آشنا خواهیم شد. پیش از Hookها، چنین اشتراک‌گذاری منطقی، معمولاً به الگوهای پیچیده‌تری مانند Render Props یا Higher-Order Components نیاز داشت که در درس‌های قبلی به‌طور مختصر با یکی از آن‌ها آشنا شدیم.

Hookها جایگزین کامل کلاس‌ها هستند، نه یک افزونه جزئی

از زمان معرجی Hookها، مسیر اصلی توسعه React حول Function Components و Hookها شکل گرفته است. Class Components همچنان در React پشتیبانی می‌شوند و در بسیاری از کدهای قدیمی دیده می‌شوند، اما مستندات رسمی React و اکوسیستم آن، Function Components همراه با Hookها را به‌عنوان روش استاندارد و توصیه‌شده معرفی می‌کنند.

مثال قابل اجرا

ترکیب State و Effect در یک Function Component

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return <p>{seconds} ثانیه از نمایش این کامپوننت گذشته است</p>;
}

function App() {
  return <Timer />;
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

Hookها توابعی هستند که به Function Componentها امکان می‌دهند از State و سایر قابلیت‌های React، بدون نیاز به Class Components، استفاده کنند. این ابزار مشکلاتی مانند پخش‌شدن منطق مرتبط در چند متد جداگانه و دشواری استفاده مجدد از منطق را حل کرد و به مسیر اصلی توسعه در React مدرن تبدیل شد. در درس بعدی به قوانین مهمی می‌پردازیم که باید هنگام استفاده از Hookها همیشه رعایت شوند: Rules of Hooks.