آموزش هوک یوزافکت 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 پر شده است