آموزش هوک یوزافکت useEffect در ری اکت

یوز افکت یک هوک است که به شما اجازه می‌دهد تابعی را در زمان‌های مشخصی از چرخه حیات کامپوننت اجرا کنید. این تابع می‌تواند هر کاری را انجام دهد که به یک سیستم خارجی مربوط است، مانند دریافت داده از API، اشتراک‌گذاری داده با context، ایجاد یک event listener، تغییر عنوان صفحه و غیره. این تابع را می‌توانید effect یا side effect بنامید.

یوز افکت یک آرگومان می‌گیرد که یک تابع است. این تابع هر بار که کامپوننت رندر می‌شود، اجرا می‌شود. اما شما می‌توانید با استفاده از آرگومان دوم یوز افکت، که یک آرایه است، تعیین کنید که effect شما در چه شرایطی اجرا شود. این آرایه را می‌توانید dependency array بنامید. اگر شما این آرایه را خالی بگذارید، effect شما فقط یک بار در زمان mount کامپوننت اجرا می‌شود. اگر شما یک یا چند متغیر را در این آرایه قرار بدهید، effect شما هر بار که یکی از این متغیرها تغییر کند، اجرا می‌شود.

یک نکته مهم در مورد یوز افکت این است که تابع effect می‌تواند یک تابع دیگر را به عنوان خروجی برگرداند. این تابع را می‌توانید cleanup function بنامید. این تابع برای پاک کردن هر چیزی که effect شما ایجاد کرده است، مانند حذف یک event listener، لغو یک درخواست API، و غیره، استفاده می‌شود. این تابع هر بار که effect شما اجرا می‌شود، قبل از اجرای effect جدید، فراخوانی می‌شود. همچنین هنگامی که کامپوننت unmount می‌شود، این تابع فراخوانی می‌شود.

در زیر چند نمونه کد از استفاده از یوز افکت را می‌بینید:

```jsx
// یک کامپوننت که عنوان صفحه را بر اساس شمارش می‌تواند تغییر دهد
import React, { useState, useEffect } from "react";

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

// این effect هر بار که count تغییر می‌کند، اجرا می‌شود
useEffect(() => {
// عنوان صفحه را تغییر می‌دهد
document.title = `شما ${count} بار کلیک کرده‌اید`;
}, [count]); // dependency array با count پر شده است

return (
<div>
<p>شما {count} بار کلیک کرده‌اید</p>
<button ={() => setCount(count + 1)}>کلیک کنید</button>
</div>
);
}
```

```jsx
// یک کامپوننت که داده‌ای را از یک API دریافت می‌کند
import React, { useState, useEffect } from "react";

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

// این effect فقط یک بار در زمان mount کامپوننت اجرا می‌شود
useEffect(() => {
// یک متغیر برای بررسی وضعیت mount شدن کامپوننت
let isMounted = true;

// یک تابع async برای دریافت داده از API
async function fetchData() {
try {
// یک درخواست fetch به API
const response = await fetch("https://example.com/api/data");
// داده را به صورت JSON تبدیل می‌کند
const data = await response.json();
// اگر کامپوننت هنوز mount شده است، state را به‌روزرسانی می‌کند
if (isMounted) {
setData(data);
setLoading(false);
}
} catch (error) {
// اگر کامپوننت هنوز mount شده است، خطا را نشان می‌دهد
if (isMounted) {
setError(error);
setLoading(false);
}
}
}

// تابع fetchData را فراخوانی می‌کند
fetchData();

// یک تابع cleanup که متغیر isMounted را false می‌کند
return () => {
isMounted = false;
};
}, []); // dependency array خالی است

// رندر کامپوننت بر اساس state
if (loading) {
return <div>در حال بارگذاری ...</div>;
} else if (error) {
return <div>خطا: {error.message}</div>;
} else {
return <div>داده: {JSON.stringify(data)}</div>;
}
}
```

```jsx
// یک کامپوننت که یک event listener برای کلید escape ایجاد می‌کند
import React, { useState, useEffect } from "react";

function Modal({ , children }) {
const [visible, setVisible] = useState(true);

// این effect هر بار که visible تغییر می‌کند، اجرا می‌شود
useEffect(() => {
// یک تابع برای بررسی کلید فشرده شده
function handleKeyDown(event) {
// اگر کلید escape فشرده شده باشد، visible را false می‌کند
if (event.key === "Escape") {
setVisible(false);
}
}

// اگر visible true باشد، یک event listener به window اضافه می‌کند
if (visible) {
window.addEventListener("keydown", handleKeyDown);
}

// یک تابع cleanup که event listener را از window حذف می‌کند
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, [visible]); // dependency array با visible پر شده است