useEffect ری‌ اکت

useEffect چیست؟

در ری اکت، هوک useEffect ابزاری مفید برای مدیریت اثرات جانبی (Side Effects) در کامپوننت‌های تابعی است.

اثرات جانبی به عملیات‌هایی گفته می‌شود که پس از رندر شدن کامپوننت انجام می‌گیرند، از جمله:

دریافت داده از API یا سرور
تغییر عنوان صفحه مرورگر
تنظیم تایمر‌ها (مانند شمارش معکوس)
گوش دادن به رویدادهای کاربر مانند کلیک یا اسکرول

به‌بیان ساده، useEffect به شما امکان می‌دهد تعریف کنید که "پس از رندر شدن کامپوننت، چه عملیاتی باید انجام شود."

چطور از useEffect استفاده کنیم؟

useEffect یک تابع در ری‌اکت است که دو آرگومان دریافت می‌کند:

useEffect(<function>, <dependency>)

تابع اثر: تابعی که می‌خواهید پس از هر بار رندر شدن کامپوننت اجرا شود.
آرایه وابستگی (اختیاری): آرایه‌ای از مقادیر که تعیین می‌کند تابع اثر چه زمانی دوباره اجرا شود. اگر این آرایه خالی باشد، تابع فقط یک‌بار پس از بارگذاری اولیه اجرا خواهد شد.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Component Rendered');
  }); // بدون وابستگی

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  );
}

در این مثال، هر بار که روی دکمه کلیک می‌کنید، مقدار count تغییر می‌کند و کامپوننت دوباره رندر می‌شود. از آنجا که آرایه وابستگی برای useEffect مشخص نشده است، این تابع پس از هر بار رندر اجرا می‌شود و پیام مربوطه در کنسول نمایش داده می‌شود.

نقش آرایه وابستگی‌ها

آرایه وابستگی‌ها به ری‌اکت اطلاع می‌دهد که تابع اثر چه زمانی باید اجرا شود. این آرایه سه حالت اصلی دارد:

1. آرایه خالی (`[]`)

در این حالت، تابع فقط یک‌بار، هنگام اولین رندر کامپوننت اجرا می‌شود.

useEffect(() => {
  fetch('https://fakestoreapi.com/products')
    .then(response => response.json())
    .then(data => setData(data));
}, []); // فقط یک‌بار هنگام بارگذاری

2. آرایه با مقادیر وابسته

اگر داخل آرایه مقادیری مثل count قرار دهید، تابع هر بار که آن مقدار تغییر کند اجرا خواهد شد.

useEffect(() => {
  document.title = `شما ${count} بار کلیک کردید`;
}, [count]);

خلاصه درس

تمرین

مشاهده پاسخ

توسعه دهندگان

نیما عراقی