کاربرد و روش استفاده از useEffect ها در React

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

در این مقاله، نحوه استفاده از هوک useEffect و زمان فراخوانی آن را بررسی خواهیم کرد. همچنین برخی مثال‌های ساده کد را ارائه خواهیم داد تا درک نحوه استفاده از useEffect در برنامه‌های React شما را آسان کند.

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

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

بیایید با یک مثال ساده شروع کنیم:

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    console.log("Component rendered");
    return () => {
      console.log("Component unmounted");
    };
  }, []);

  return <div>My Component</div>;
};

export default MyComponent;

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

آرگومان دوم useEffect یک آرایه خالی ([]). این بدان معنی است که اثر فقط یک بار، در رندر اولیه اجرا خواهد شد. اگر لیستی از وابستگی‌ها را در آرایه ارائه دهید، اثر هر بار که یکی از وابستگی‌ها تغییر کند اجرا خواهد شد.

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

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

  useEffect(() => {
    console.log("Count updated:", count);
  }, [count]);

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

export default Counter;

در مثال بالا، یک کامپوننت Counter داریم که یک مقدار شمارش را نمایش می‌دهد و هنگام کلیک روی دکمه آن را افزایش می‌دهد. هوک useEffect برای ثبت مقدار شمارش به‌روز شده هر زمان که تغییر می‌کند استفاده می‌شود.

با ارائه متغیر شمارش در آرایه وابستگی‌ها، اثر هر بار که شمارش تغییر کند اجرا خواهد شد. این به ما امکان می‌دهد جلوه‌های جانبی را بر اساس شرایط خاص یا هنگام تغییر داده‌های خاص اجرا کنیم.

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