معرفی useEffect و کاربردهای آن

مقدمه

به فصل ششم خوش آمدید! تاکنون یاد گرفته‌ایم که کامپوننت‌های React توابعی هستند که props و state را دریافت کرده و JSX را برمی‌گردانند. کار اصلی آنها، توصیف UI است. اما اپلیکیشن‌های دنیای واقعی نیاز به انجام کارهایی فراتر از رندر کردن صرف دارند. برای مثال، ممکن است نیاز داشته باشیم داده‌هایی را از یک API دریافت کنیم، یک تایمر را تنظیم کنیم، یا به صورت دستی DOM را دستکاری کنیم.

به این نوع عملیات که با دنیای خارج از React (مانند شبکه، DOM مرورگر، یا تایمرها) تعامل دارند، «عوارض جانبی» یا Side Effects گفته می‌شود. هوک useEffect ابزار اصلی React برای مدیریت این عوارض جانبی در کامپوننت‌های تابعی است.

useEffect چیست؟

هوک useEffect به شما اجازه می‌دهد تا یک تابع (که به آن «افکت» یا effect می‌گوییم) را پس از اینکه React تغییرات را در DOM اعمال کرد، اجرا کنید. این تضمین می‌کند که کدهای مربوط به عوارض جانبی، فرآیند رندر اصلی را مسدود نکرده و پس از به‌روزرسانی UI اجرا شوند.

ساختار useEffect

هوک useEffect دو آرگومان می‌پذیرد:

• تابع افکت (Effect Function): تابعی که حاوی منطق عارضه جانبی شماست. React این تابع را پس از هر بار رندر کامل کامپوننت، اجرا خواهد کرد.
• آرایه وابستگی‌ها (Dependency Array): یک آرایه اختیاری که مشخص می‌کند افکت شما به کدام مقادیر (props یا state) وابسته است. React تنها زمانی افکت را دوباره اجرا می‌کند که یکی از مقادیر این آرایه تغییر کرده باشد. این آرایه برای بهینه‌سازی عملکرد و جلوگیری از اجرای غیرضروری افکت‌ها حیاتی است.

یک مثال ساده: تغییر عنوان صفحه

بیایید با یک مثال ساده شروع کنیم. می‌خواهیم یک شمارنده بسازیم و با هر بار کلیک، عنوان صفحه (document.title) را نیز به‌روزرسانی کنیم. دستکاری document.title یک عارضه جانبی است، زیرا با یک API خارج از React (یعنی DOM مرورگر) کار می‌کند.

JAVASCRIPT (React)

import { useState, useEffect } from 'react';

function TitleChanger() {
  const [count, setCount] = useState(0);

  // This effect runs after every render
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

توجه کنید که ما آرایه وابستگی‌ها را ارائه نکرده‌ایم. این یعنی افکت ما پس از هر بار رندر اجرا خواهد شد. هرچند در این مثال ساده مشکلی ایجاد نمی‌کند، اما در درس بعدی خواهیم دید که چگونه با استفاده از آرایه وابستگی‌ها، اجرای افکت‌ها را کنترل و بهینه کنیم.

در این درس، با مفهوم «عوارض جانبی» و هوک useEffect به عنوان ابزار اصلی React برای مدیریت آنها آشنا شدیم. دیدیم که چگونه می‌توان با useEffect کدی را پس از اتمام فرآیند رندر اجرا کرد تا با سیستم‌های خارجی مانند DOM مرورگر تعامل داشته باشیم.

این تنها یک معرفی اولیه بود. useEffect یکی از قدرتمندترین و در عین حال پرچالش‌ترین هوک‌ها در React است. در درس بعدی، به «کنترل اجرای افکت بر اساس تغییرات» خواهیم پرداخت و با بررسی دقیق آرایه وابستگی‌ها، یاد می‌گیریم که چگونه از اجرای غیرضروری افکت‌ها جلوگیری کرده و عملکرد اپلیکیشن خود را بهینه کنیم.