هوک useEffect ری اکت و بررسی تخصصی React.useEffect
هوک useEffect ری اکت یکی از حیاتی ترین هوک های React هست. حقیقتا اصلا مهم نیست که چند وقته سراغ React اومدید ، useEffect در ری اکت یکی از ضروری ترین مباحثی هست که هر ری اکت دِوِلوپری باید بهش تسط کامل داشته باشه !!
با فِرانت اِندی همراه باشید که میخوایم هوک useEffect در ری اکت رو حسابی بررسی کنیم 🙂
قبل از هرچیز ، بهتره ببینیم خود ری اکت چه تعریفی از این هوک خفنش داره :
هوک useEffect به شما امکان مدیریت Side Effect ها را میدهد !
Side Effect یعنی چی ؟!
خود React میگه که از هوک useEffect میشه برای مدیریت Side Effect های کامپوننت استفاده کرد.
بطور ساده و خلاصه ، هر رفتار یا عملی که باعث تاثیر خارجی در Function شود را Side Effect میگوییم.
تو ری اکت معمولا چنین Side Effect هایی رو داریم :
- دریافت Data از سرور :
زمانیکه ما از سرور یکسری اطلاعات دریافت میکنیم و در صفحه نمایش میدیم. این اتفاق نمونه بارز Side Effect هست. - تغییر DOM :
وقتی میخوایم یک تغییر در DOM ایجاد کنیم مثل اضافه کردن Event Listener یا تغییر Element ها. این موارد هم یک نوع Side Effect هستن. - خواندن اطلاعات از Local Storage :
خوندن اطلاعات ذخیره شده در Local Storage هم یک نوع Side Effect محسوب میشه. - چند نمونه دیگر :
اضافه کردن setTimeOut ، استفاده از سوکت و ابزار های بروزرسانی real time نیز Side Effect محسوب میشن.
تمام موارد بالا یک نوع Side Effect هستن.
در واقع Side Effect ها غیرقابل پیش بینی هستن چون با محیط خارجی در ارتباط هستن! مثلا برای صفحه وبلاگ قصد دریافت لیست مقالات از سرور را داریم اما ارور 500 دریافت میکنیم!
Side Effect ها معمولا عوارض جانبی واسه اپیکیشن ما دارن مثل Memory Leaks ( پر شدن حافظه رم ) و رفتار غیرمنتظره و پیش بینی نشده.
پس با توجه به عوارضی که Side Effect ها دارن ، خیلی ضروریه که بتونیم مدیریتشون کنیم!
هوک useEffect ری اکت اومده تا باهاش بتونیم Side Effect های ری اکت رو مدیریت کنیم 🙂
هوک useEffect ری اکت چیست ؟
تو React ، هوک useEffect به ما امکان مدیریت Side Effect هارو میده ( مواردی که در بالا مثال زدیم مثل Data Fetching )
همچنین هوک useEffect امکان مدیریت چرخه حیات ( lifecycle ) کامپوننت رو بهمون میده. ( مثلا اینکه زمانیکه کامپوننت ایجاد میشه ، re-Render میشه یا از DOM حذف میشه چه اتفاقی بیوفته )
مدیریت چرخه حیات کامپوننت باعث میشه که رفتار کامپوننت ما قابل پیش بینی باشه.
قبل از اینکه بریم هوک useEffect در ری اکت رو بررسی کنیم، باید نکته زیر رو برای خودمون یادآوری کنیم:
اِفِکت ها تو ری اکت بعد از هر re-Render اتفاق میوفتن البته میشه جلوی این موضوع رو گرفت.
چطور از هوک useEffect استفاده کنیم ؟
چگونگی استفاده از هوک useEffect در ری اکت بصورت زیر هست :
useEffect(callback, [dependencies]);
یا :
// 1. ایمپورت کردن هوک یوز افکت
import { useEffect } from 'react';
// تابع ما
const App = () => {
useEffect(() => {
}, []);
return(<div>FrontEndi.com</div>)
}
تو خط 2 ما هوک useEffect رو از خود react فراخوانی کردیم.
تو خط 6 داخل کامپوننت خودمون از هوک useEffect استفاده کردیم.
خود هوک useEffect از ما 2 ورودی میگیره:
اولین آرگومان یک تابع هست :
تابعی که به useEffect پاس میدیم یک Callback Function هست. این تابع بعد از Render کامپوننت اجرا میشه.
تو این تابع میتونیم Side Effect های خودمون رو اجرا کنیم. ( مثل دریافت اطلاعات از سرور و .. )
تابع callback دقیقا بعد از بروزرسانی DOM اجرا میشه. تو تیکه کد بالا یک تابع خالی به useEffect پاس دادیم اما هر نوع عملیاتی میشه داخلش نوشت.
دومین آرگومان Dependencies هست که باید در قالب یک آرایه به useEffect پاس داده بشه :
دومین آرگومان که اختیاری هست ، یک آرایه هست. این آرایه وابستگی های useEffect هست.
این آرایه باید شامل مقادیری باشه که میتونن رو Side Effect ما تاثیر بزارن .
در واقع اگه این وابستگی ها مقدارشون تغییر کنه ، Side Effect ما مجدد اجرا میشه. به مثال زیر دقت کنید :
// ایمپورت کردن هوک یوز افکت
import { useEffect } from 'react';
// کامپوننت ما
const App = ({name,email}) => {
// استفاده از هوک یوز افکت
useEffect(() => {
axios.get('mysite.com/api // My Side Effect')
}, [name,email]); // useEffect Dependencies
return(<div>FrontEndi.com</div>)
}
تو خط 8 آرایه Dependencies رو تعریف کردیم. خط 8 این معنی رو میده که اگر مقدار name و email تغییر کردن Side Effect ما ( خط 7 ) باید مجدد اجرا بشه.
اگه بخوایم دقیقتر خط 8 رو بررسی کنیم میتونیم اینو بگیم :
بین re-Render های مختلف کامپوننت ، هوک useEffect مقادیر Dependencies رو چک میکنه که ببینه آیا تغییری داشتن یا نه ؟ اگه بدون تغییر بودن که هیچ. اما اگه مقدارشون تغییر پیدا کرده بود ، تابع داخل useEffect یا همون Side Effect مجدد اجرا میشه.
این اتفاق خیلی خوبه چون خیلی وقت ها پیش میاد که میخوایم درصورت تغییر یک مقدار ، یک کاری رو انجام بدیم. مثلا درصورت تغییر اطلاعات کاربر ، اطلاعات جدید کاربر رو به سرور یا Local Storage بفرستیم.
چند نکته مهم راجب useEffect ری اکت
اگه قصد استفاده از useEffect در React رو دارید ، باید یکسری نکات مهم رو رعایت کنید.
اجرا شدن useEffect بعد هر re-Render
اگه آرایه Dependencies ( آرگومان دوم useEffect ) رو قرار ندید ، تابعی که داخل useEffect قرار دادید بعد از هر re-Render اجرا میشه. ( اجرا بعد از هر re-Render )
لوپ بینهایت در useEffect !
اگه هیچ Dependencies برای useEffect تعریف نکنید و داخل تابع useEffect یک State رو بروزرسانی کنید ، به این دلیل که پس از هر تغییر State یک re-Render صورت میگیره و مجدد تابع useEffect اجرا میشه و مجدد State بروزرسانی میشه ، کامپوننت شما داخل یک Loop بینهایت میوفته و برنامه شما کرش میکنه! ( Infinite Loop )
تو تیکه کد زیر این مشکل واضحه :
function MyComponent() {
const [data, setData] = useState([])
useEffect(() => {
fetchData().then(myData => setData(myData)) // اینجا استیت رو آپدیت میکنیم که باعث ری رندر میشه
}); // اینجا آرایه وابستگی تعریف نشده. پس بعد هر ری رندر اجرا میشه
}
تو تیکه کد بالا اتفاق زیر میوفته :
برای اولین بار Render صورت میگیره و تابع داخل useEffect اجرا میشه. داخل این تابع State رو آپدیت کردیم و چون State تغییر میکنه ، مجدد کامپوننت re-Render میشه. همین پروسه تا روز قیامت ادامه پیدا میکنه 🙂
برای اینکه اتفاق بالا نیوفته ، باید یک آرایه خالی به عنوان وابستگی به useEffect پاس بدیم.
زمانیکه یک آرایه خالی ( Empty Array ) به هوک useEffect پاس میدیم، باعث میشه که تابع داخل useEffect فقط بعد از اولین Render اجرا بشه. ( یعنی یکبار )
مثال زیر ، شکل تصحیح شده تیکه کد بالاست :
function MyComponent() {
const [data, setData] = useState([])
useEffect(() => {
fetchData().then(myData => setData(myData)) // ساید افکت ما
},[]); // آرایه خالی یعنی فقط بعد اولین رندر اجرا شو
}
تابع CleanUp در ری اکت
گاهی اوغات میخوایم وقتی کامپوننت ما از بین میره ( از DOM حذف میشه ) یک اتفاقی بیوفته.
مثلا سناریویی رو در نظر بگیرید که داخل useEffect یک تایمر گذاشتیم اما کامپوننت ما از DOM حذف میشه. اتفاقی که اینجا میوفته این هست که کامپوننت ما از DOM حذف میشه اما تایمر هنوز داره کار میکنه چون clearInterval نشده!
کد زیر کد مشکل دار هست چون تابع cleanUp نداره :
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
setInterval(() => setTime(1), 1000); // یه تایمر داریم که هر یک ثانیه یکبار اجرا میشه اما هیچموقع متوقفش نکردیم
}, []);
}
مشکلی که تو تیکه کد بالا داریم این هست که :
زمانیکه کامپوننت از DOM حذف میشه ، setInterval همچنان کار میکنه و setTime رو انجام میده! ( درصورتیکه کامپوننت حذف شده )
این اتفاق به این دلیل میوفته که ما clearInterval نکردیم. ( تایمر رو متوقف نکردیم ) پس در اینجا به مشکل پر شدن حافظه در ری اکت بر میخوریم ( Memory Leak )
برای رفع این مشکل باید یک تابع Clean Up بنویسیم. یعنی زمانیکه کامپوننت ما از DOM حذف شد یک کاری انجام بدیم.
در این سناریو باید پس از حذف کامپوننت از DOM ، عملیات ClearInterval رو انجام بدیم .
برای اینکه اینکار رو انجام بدیم باید داخل useEffect ، یک تابع Return کنیم :
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
let interval = setInterval(() => setTime(1), 1000);
return () => {
// setInterval cleared when component unmounts
clearInterval(interval);
}
}, []);
}
اگه تو useEffect یک تابع Return کنید ، خود useEffect متوجه میشه که این تابع رو فقط در زمان حذف کامپوننت از DOM باید اجرا کنه.
خط 8 و 9 تیکه کد بالا فقط بعد از حذف شدن کامپوننت از DOM ، اجرا میشه.
مثلا زمانیکه از کاربر از یک صفحه به صفحه دیگه منتقل میشه ، unmounted کامپوننت رخ میده خط 8 و 9 تیکه کد بالا اجرا میشه.
مثال کاربردی از هوک useEffect
ابتدای همین مقاله گفتیم که از هوک useEffect برای مدیریت Side Effect ها استفاده میکنیم.
تو مثال زیر یک Side Effect رو تو بدنه کامپوننت اجرا کردیم که این اشتباهه. اگه از useEffect برای اجرای Side Effect ها استفاده نکنیم امکان مدیریت Side Effect هارو نداریم!
function Greet({ name }) {
const message = `Hello, ${name}!`;
// این بده
document.title = `Greetings to ${name}`; // ساید افکت ما
return <div>{message}</div>;
}
تو تیکه کد بالا یک Side Effect داریم .
خط 5 با هر بار re-Render شدن کامپوننت اجرا میشه و این اصلا خوب نیست چون این Side Effect باید فقط درصورت تغییر مقدار name که یک Props هست ، اجرا بشه.
برای رفع این مشکل و مدیریت Side Effect بطوریکه فقط درصورت تغییر Props ، رندر مجدد صورت بگیره باید بصورت زیر عمل کنیم :
import { useEffect } from 'react';
function Greet({ name }) {
const message = `Hello, ${name}!`;
useEffect(() => {
// Good!
document.title = `Greetings to ${name}`; الان ساید افکت ما فقط درصورت تغییر نام اجرا میشه و این عالیه
}, [name]);
return <div>{message}</div>;
}
بریم چند نمونه از کاربرد هوک useEffect در React رو ببینیم …
با هوک useEffect ری اکت چیکار میشه کرد ؟
بطور خلاصه و ساده ما میتونیم با هوک useEffect ری اکت ، یکسری کارها و عملیات مواقع زیر انجام بدیم :
هنگام ایجاد شدن کامپوننت در DOM یا همون Component did mount
بطور مثال وقتی کاربر وارد صفحه X شد یک پیغام بهش نشون بدیم. یا وقتی کاربر وارد صفحه فروشگاه شد ، لیست محصولات رو از سرور دریافت کنیم. بصورت زیر :
useEffect(() => {
// فقط زمان ایجاد کامپوننت اجرا میشم
document.title = 'کامپوننت ایجاد شد';
axios.get('/blogs') // دریافت لیست مقالات از سرور
}, []);
تو تیکه کد بالا ، آرایه خالی به عنوان Dependencies باعث شده که تابع فقط 1 بار پس از اولین رندر اجرا بشه و تو re-Render های بعدی کامپوننت اجرا نشه.
هنگام تغییر مقدار Value هایی که خودمون مشخص کردیم به عنوان Dependencies ( همون Component did update )
مثلا درصورت تغییر سبد خرید کاربر ، سبد خرید جدید رو داخل Local Storage ذخیره کنیم. ( در این صورت باید cart رو به عنوان Dependencies برای useEffect قرار بدیم تا فقط درصورت تغییر cart این اتفاق رخ بده )
تو مثال زیر گفتیم هر زمان props تغییر کرد ، callback Function ما مجدد اجرا بشه :
useEffect(() => {
localstorage.SetItem('cart',JSON.stringify(cart)) // من زمانی که سبد خرید تغییر کنه اجرا میشم
}, [cart]);
تو Component did update یه نکته ای وجود داره. اینکه اجرای Side Effect یکبار پس از اولین Render صورت میگیره و در دفعات بعد فقط هنگام تغییر مقادیر Dependencies صورت میگیره.
هنگام حذف شدن کامپوننت از DOM یا همون Unmounting ( بطور مثال این مرحله هنگام تغییر صفحه توسط کاربر اتفاق میوفته )
مثلا میخوایم وقتی کاربر از فروشگاه به صفحه دیگه ای رفت ، یکسری کارها داخل صفحه فروشگاه اتفاق بیوفته.
اگه داخل useEffect یک تابع Return کنیم ، تابع فقط پس از حذف کامپوننت از DOM اجرا میشه :
useEffect(()=>{
return function cleanUp(){
// من فقط بعد از حذف کامپوننت از دام اجرا میشم
}
},[])
معادل چرخه حیات Class Component به Functional Component
کامپوننت های ری اکت یا Functional Component هستن یا Class Component .
و گفتیم که از هوک ها فقط تو کامپوننت هایی که Functional هستن میشه استفاده کرد. اما اگه کامپوننت شما Class Component باشه چی ؟ یا اگر قصد تبدیل کامپوننت Class Base خودتون رو به Functional داشته باشید چی ؟
اگه میخواید LifeCycle کامپوننت Class Base خودتون رو به Functional Component منتقل کنید یا بلعکس ، این بخش برای شما کاربرد داره در غیراینصورت نیازی به مطالعه این بخش نیست.
معادل componentDidMount در فانکشنال کامپوننت
تو کلاس کامپوننت ها از componentDidMount برای هندل کردن Mounting کامپوننت ( زمان ایجاد شدن کامپوننت ) استفاده میکردیم.
اگر یک آرایه خالی به به عنوان Dependencies به useEffect پاس بدید ، میتونید از componentDidMount ری اکت تو فانکشنال کامپوننت ها هم استفاده کنید:
useEffect(() => {
// componentDidMount in Functional Component
}, [])
معادل componentDidUpdate در فانکشنال کامپوننت
تو کلاس کامپوننت ها از componentDidUpdate برای هندل کردن Update کامپوننت استفاده میکردیم. ( انجام کاری هنگام تغییر Dependencies ها )
تو فانکشنال کامپوننت میتونیم از componentDidUpdate ری اکت بصورت زیر استفاده کنیم :
useEffect(() => {
// componentDidUpdate in Functional Component
}, [state, props])
معادل componentWillUnmount در فانکشنال کامپوننت
تو کلاس کامپوننت ها از componentWillUnmount برای هندل کردن بحث Unmount استفاده میکردیم. ( زمانیکه کامپوننت از DOM حذف میشه )
تو فانکشنال کامپوننت بجای componentWillUnmount ری اکت میتونیم از دستور العمل زیر استفاده کنیم :
useEffect(() => {
// componentWillUnmount in Functional Component
return () => {
// CleanUp Function
}
}, [])
دریافت اطلاعات از سرور در زمان اولین رندر کامپوننت به کمک useEffect در React !
در خیلی مواقع ما نیاز داریم در زمان اولین Render کامپوننت یا همون فاز Mount کامپوننت، به سرور درخواست بزنیم و اطلاعات مدنظر خودمون رو دریافت کنیم.
تو تیکه کد زیر مشخصه که چطور میتونیم این کار رو انجام بدیم ..
من یک کامپوننت به اسم DataFetcher ساختم که به عنوان Props از من یک url میگیره :
import React from 'react';
import DataFetcher from './DataFetcher';
const App = () => {
return (
<div>
<h1>Data Fetching Example</h1>
<DataFetcher url="https://api.example.com/data" />
</div>
);
};
export default App;
حالا یه نگاهی به کامپوننت DataFetcher بندازیم تا توضیحاتش رو بخونیم باهم :
import React, { useEffect, useState } from 'react';
const DataFetcher = ({ url }) => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// Function to fetch data
const fetchData = async () => {
try {
setIsLoading(true);
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setIsLoading(false);
}
};
// Call the function
fetchData();
// The empty dependency array means this effect will only run once (like componentDidMount)
}, [url]); // Depend on url so if it changes, we refetch data
// Render loading, error, or data
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <div>{JSON.stringify(data, null, 2)}</div>;
};
export default DataFetcher;
تو کامپوننت بالا ما یک useEffect داریم و گفتیم زمانیکه Props ما که همون url هست تغییر کرد، تابع داخل useEffect رو اجرا کن.
داخل این تابع ما اطلاعات رو از سرور دریافت کردیم.
این یعنی تابع ما یکبار در زمان اولین رندر اجرا میشه و سپس درصورتیکه مقدار url تغییر کنه، مجدد اجرا میشه.
چند نکته مهم درباره هوک useEffect که باید بدونیم !
حالا که فهمیدیم هوک useEffect ری اکت دقیقا چیه و چه کاربردی داره، اجازه بدید چند نکته مهم رو باهمدیگه مرور و بررسی کنیم تا بصورت عمیق این هوک رو یاد گرفته بگیریم ..
خطر از دست دادن بهینگی اپیکیشن !
درسته که هوک useEffect ری اکت فوق العادس و خیلی کاربردیه اما اگه درست و اصولی ازش استفاده نکنیم، میتونه با اجرای مجدد Effect ها باعث از دست رفتن بهینگی اپیکیشن ما بشه.
درواقع تو هوک useEffect ، آرایه Dependencies مشخص میکنه که Effect ما چند بار اجرا بشه. خیلی خیلی باید مراقب باشیم که Dependencies های درستی رو انتخاب کنیم تا Effect های ما بینهایت تکرار نشن.
هر هوک useEffect فقط مختص یک منطق ( Logic )
ما باید داخل هر هوک useEffect صرفا یک یا چند عمل مرتبط باهم رو قرار بدیم. یعنی نباید اکشن ها ( عمل های ) نامرتبط به همدیگه رو داخل یک هوک useEffect قرار بدیم!
در چنین سناریو هایی، باید چند هوک useEffect تعریف کنیم و موارد مرتبط با هم رو داخل یک هوک useEffect قرار بدیم.
داخل useEffect نباید عملیات سنگین انجام بدیم !
ما نباید داخل هوک useEffect عملیات سنگین و پیچیده انجام بدیم. باید تمام تلاش خودمون رو بکنیم تا Effect خودمون رو سبک نگه داریم.
اگر عملیات سنگینی داریم باید به خارج از کامپوننت منتقلش کنیم یا با تکنیک memoization، نتیجه عملیات رو کش کنیم.
پلاگین eslint-plugin-react-hooks برای جلوگیری از بروز اشتباه !
برای eslint یک پلاگین وجود داره به اسم eslint-plugin-react-hooks که کمک میکنه به اشتباهات خودمون در مورد هوک ها و مخصوصا هوک useEffect پی ببریم و ازش جلوگیری کنیم. مثلا اگه لیست Dependencies خودمون رو اشتباه وارد کرده باشیم، این پلاگین به ما هشدار میده.
تو رندر سمت سرور ( SSR ) نمیتونیم از هوک useEffect استفاده کنیم !
اگه داریم از رندر سمت سرور ( Server Side Rendering ) استفاده میکنیم، باید به این نکته توجه داشته باشیم که هوک useEffect اجرا نمیشه! چون این هوک سمت کلاینت اجرا میشه.
اگر یک Effect داریم که میخوایم سمت سرور اجرا بشه، میتونیم به خارج از کامپوننت منتقلش کنیم.
رفع خطا و مشکلات مربوط به useEffect در ری اکت !
قطعا در حین استفاده از useEffect در React دچار مشکلات و خطاهای ناخواسته ای میشیم که ممکنه زمان زیادی از ما بگیرن. اما اینجور خطاهارو چطور میشه حل کرد ؟
اولین و ساده ترین راه حل این هست که داخل effect خودمون از console.log استفاده کنیم و مقادیر خودمون رو داخل کنسول مرورگر چاپ کنیم.
دومین روش، استفاده از React DevTools هست که کمک میکنه مشکلات و خطاهای مرتبط به useEffect رو شناسایی و رفع کنیم.
تو آرایه وابستگی ها نباید شرط بنویسیم !
ما درمورد آرایه وابستگی های useEffect در ری اکت صحبت کردیم و دیدیم چه کاربردی داره. درحقیقت Dependencies Array مشخص میکنه که تابع داخل useEffect چه زمانی اجرا بشه.
نکته ای که باید رعایت کنیم این هست که نباید داخل این آرایه شرط ( Conditional ) بنویسیم. اگه شرط داریم، بهتره این شرط رو داخل تابع درون useEffect بنویسیم. منظورم رو تو کد شاید بهتر بتونم بگم :
غلط :
useEffect(()=>{
// غلط
},[shart ? x : y])
صحیح :
useEffect(()=>{
// صحیح
shart ? 'کار دیگه کار':'یه کار '
},[x,y])
تست نویسی برای useEffect در ری اکت !
ما میتونیم برای پروسه های مختلف useEffect در React تست نویسی انجام بدیم تا مطمئن بشیم عملکرد صحیحی در شرایط مختلف داره.
مثلا برای mount کامپوننت، unmount کامپوننت، update کامپوننت و .. تست نویسی انجام بدیم. برای تست نویسی میتونیم از کتابخانه هایی مثل React Testing Library استفاده کنیم.
جمع بندی
هوک useEffect برای مدیریت Side Effect ها تو React کاربرد داره.
هوک useEffect در ری اکت از ما 2 آرگومان میگیره. اولین آرگومان یک Callback Function هست که باید Side Effect خودمون رو داخلش بنویسیم. آرگومان دوم Dependencies های ما هستن که باید در قالب یک آرایه به useEffect بدیم.
این Callback Function یکبار پس از اولین Render اجرا میشه و در Render های بعدی ، درصورت تغییر مقدار یکی از Dependencies های ما ، مجدد اجرا میشه.
ممنون که آموزش هوک useEffect رو با فِرانت اِندی همراه بودید و امیدوارم که این هوک کاربردی رو بصورت عمیق درک کرده باشید. برای درک بهتر lifeCycle ری اکت پیشنهاد میکنم مقاله virtual dom ری اکت رو هم مطالعه کنید 🙂
تو این مقاله راجب چه مباحثی صحبت کردیم؟
هوک useEffect برای مدیریت Side Effect و LifeCycle کاربرد داره. تو این مقاله توضیح دادیم که Side Effect چیه و چرا باید مدیریتش کنیم.
دریافت اطلاعات از سرور با useEffect باید زمان ایجاد کامپوننت یا همون Component did mount انجام بشه. کافیه یک آرایه خالی به عنوان Dependencies قرار بدید و داخل تابع useEffect ، اطلاعات خودتون رو از سرور دریافت کنید.
تو این روش اطلاعات شما فقط هنگام اولین Render از سرور دریافت میشه.
تو این مقاله راجب این موضوع صحبت کردیم.
برای اینکه یک تیکه کد یا تابع رو فقط هنگام تغییر State یا Props اجرا کنید، لازمه که State یا Props خودتون رو به عنوان Dependencies به useEffect معرفی کنید.
در واقع آرایه ای که به عنوان Dependencies به هوک useEffect باید بدید اینجوری میشه : [state,props]
بله به تعداد مورد نیازتون میتونید هوک useEffect تعریف و استفاده کنید. اما استفاده بی رویه و بیهوده از هوک useEffect فقط باعث پیچیده و کثیف شدن کد میشه.
خیر! هوک ها فقط قابلیت استفاده در Functional Component هارو دارن.
20 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
واقعا توضیحات عالی و قابل فهم بود
سلام و درود
خوشحالم که برات مفید واقع شده 🙂
salam , mataleb kheili khob v shafaf bood , mamnoon az tozih khobton
سلام و درود
خوشحالم که این مقاله براتون مفید واقع شده 🙂
موفق باشید
بسیار کامل و دقیق توضیح دادین مرسی
سلام و درود
خوشحالم که براتون مفید واقع شده 🙂
موفق باشین
خیلی خوب بود مرسی
فقط یه سوال
توی قسمت CleanUp function مگه اینجوری نیست که دوتا کارکرد داشته باشه یکی اینکه فانکشن بعد return یکبار قبل از effect اجرا میشه و یکی دیگه هم وقتی که کامپوننت از دام حذف بشه اجرا میشه.
؟؟
سلام رفیق
بله کاملا درست متوجه شدی
کاربرد اول مثل پاک کردن تایمر
کاربرد دوم مثل رویداد ها و ..
داداش همه مقاله‌هاتو خوندم انقد عالی بود
اگه حال داشتی یکم درباره نکست بیشتر مقاله درست کن
دمت گرم
سلام پژمان جان ممنون از انرژی مثبتی که میدی 🙂
و دمت گرم که وقت گذاشتی و مقالات رو مطالعه کردی
چشم حتما، اتفاقا تعداد مقالات ری اکت خیلی زیاد شده و دمبال یه موضوع جدید بودم. نکست پیشنهاد خیلی خوبیه 🙂
دمت گرم بابت پیشنهادی که دادی
عالی بود استفاده بردیم… ممنون از دقت و نوع قالب بندی جملاتتون … از این ساده تر نمیشد مبحث به این مهمی رو به مخاطب فهموند … مرسی
سلام علی جان
آقا مرسی بابت انرژی مثبتت و نظر لطفی که داری
خوشحالم که خوندن این مقاله برات مفید بوده 🙂
موفق باشی 🙂
آقای احمدنژاد خیلی ممنون از توضیحات عالی و واضح تون….مثالهایی که نوشتین خیلی به فهم مطلب کمک میکرد….اگر سایت آموزشی دیگه ای هم در مورد نکست یا تایپ اسکریپت یا حتی خود جاوااسکریپت دارین خوشحال میشم مطلع بشم. چون عمیقا با نوشته هاتون ارتباط میگیرم و بهتر متوجه میشم.
سلام خانم حسن پور عزیز 🙂 خیییلی خییلی خوشحالم که مقالات برات مفید بوده و مررسی ازت بابت انرژی مثبتی که بهم دادی 🙂
نه حقیقتش سایت دیگه ای ندارم و تمامی مقالات رو همینجا منتشر میکنم. موفق باشی🌱
عالی بود مرسی
قرباانت علی جان
بی دریغ میتونم بگم بهترین منبع آموزشی ایرانی برای فرانت کارها هستید و واقعا نحوه آموزشتون فوق العادسسس 🙂
جواد جان خوشحالم که برات مفید واقع شده مقالات 🙂 و خیلی خیلی دمت گرم بابت انرژی مثبتی که بهم دادی 🙂 مووووفق باشی 🔥
بشدت مقاله مفیدی بود و توضیحاتش خیلی واضح و دقیق بودن
ارادت محمدرضای عزیز 🙂
خوشحالم که برات مفید واقع شده، موفق باشی 🙂