هوک‌ها در React – آموزش مفهوم Hook، Pure Effect و Side Effect

قبل از Hooks، برای استفاده از state و چرخه حیات باید کامپوننت کلاسی می‌نوشتید. امروز هوک‌ها (Hooks) این قابلیت‌ها را به کامپوننت‌های تابعی آوردند و کد React ساده‌تر، خواناتر و قابل ترکیب‌تر شد.

Hook چیست؟

Hook تابعی است که به شما اجازه می‌دهد از امکانات React — مانند state، context و lifecycle — داخل کامپوننت‌های تابعی استفاده کنید. نام «Hook» به این دلیل است که شما را به مکانیزم‌های داخلی React «قلاب» می‌زند.

هوک‌های پرکاربرد:

Pure Effect (تأثیر مستقیم)

Pure Effect تغییری است که مستقیماً به UI همان کامپوننت مربوط می‌شود و نتیجه‌ی رندر است:

• فقط ظاهر کامپوننت را تغییر می‌دهد.
• روی DOM یا سیستم خارج از کامپوننت اثری نمی‌گذارد.
• مثال: به‌روزرسانی count و نمایش آن در <h1>.

const [count, setCount] = useState(0);
// نمایش count در JSX یک Pure Effect است
return <h1>{count}</h1>;

Side Effect (اثر جانبی)

Side Effect عملی است که خارج از جریان عادی رندر انجام می‌شود و ممکن است سیستم یا مرورگر را تحت تأثیر قرار دهد:

• ارسال درخواست به API
• ذخیره در localStorage
• تغییر document.title
• ثبت event listener

این کارها به state خاصی وابسته‌اند، اما نباید مستقیماً در بدنه کامپوننت (بیرون از useEffect) نوشته شوند.

مشکل Side Effect در بدنه کامپوننت

import { useState } from "react";

export default function Sample() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);

  document.title = count; // ❌ Side Effect در بدنه — با هر رندر اجرا می‌شود

  return (
    <div>
      <h1>Count 1: {count}</h1>
      <button onClick={() => setCount(count + 1)}>افزایش Count 1</button>
      <hr />
      <h1>Count 2: {count2}</h1>
      <button onClick={() => setCount2(count2 + 1)}>افزایش Count 2</button>
    </div>
  );
}

کامپوننت با تغییر هر دو state رندر می‌شود؛ پس document.title = count حتی وقتی فقط count2 عوض شده هم اجرا می‌شود. در پروژه واقعی این الگو به درخواست‌های API تکراری و مصرف بی‌جهت منابع منجر می‌شود.

راه‌حل: useEffect

برای Side Effectها از useEffect استفاده کنید تا مشخص کنید effect چه زمانی و با چه وابستگی‌ای اجرا شود. این موضوع در بخش‌های بعدی دوره به‌تفصیل بررسی می‌شود.

جمع‌بندی

هوک‌ها پل ارتباطی کامپوننت‌های تابعی با قدرت React هستند. Pure Effect فقط UI را به‌روز می‌کند؛ Side Effect با دنیای بیرون (API، DOM، storage) کار می‌کند و باید با useEffect مدیریت شود. درک این تفاوت، پایه نوشتن کد React تمیز و بدون باگ است.