react js useEffect hook – انجمن DEV

قلاب useEffect برای رسیدگی به عوارض جانبی عملکرد در React استفاده می شود. یک عارضه جانبی تابع در جاوا اسکریپت هر اثر خارج از متغیر محلی تابع است. نمونه هایی از عوارض جانبی عملکرد عبارتند از:
I. درخواست شبکه
II. دستکاری DOM
III. واکشی داده ها از یک API
IV. تغییر مقدار یک متغیر یا یک شی که خارج از محدوده تابع است
V. عملیات setInterval یا setTimeout
VI. دسترسی یا تغییر APIهای وب
قلاب اثر use هر بار که کامپوننت ارائه می شود اجرا می شود. به یاد داشته باشید که جدا از رندر اولیه هنگامی که یک مؤلفه برای اولین بار در DOM بارگذاری می شود، هر زمان که تغییر وضعیت وجود داشته باشد، مؤلفه رندر می شود.

نحوه استفاده از قلاب useEffect

اول از همه، ما نیاز داریم؛
• وارد کردن useEffect از react
import { useState, useEffect } from "react";
• جایی در جزء خود، قبل از عبارت return، قلاب useEffect را با دو آرگومان فراخوانی کنید.

• اولین آرگومان یک تابع callback است که حاوی دستورالعمل هایی است که می خواهیم هر زمان که useEffect راه اندازی شد اجرا کنیم.

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

• نحو

useEffect(()=>{
    // excecute side effect
  }, [an array of values that the effect depends on]);

*مثال *

import { useState, useEffect } from "react";

const Home = () => {
  const [name, setName] = useState("");
  const changeName = () => {
    const userName = prompt("what is your name");
    setName(userName);
  };

  useEffect(() => {
    alert(`welcome ${name}`);
  }, [name]);

  return (
    <>
      
      click me
    >
  );
};

export default Home;