خوب در این قسمت از سری مطالب React Hooks ، قصد داریم useEffect را بررسی کنیم . در قسمت قبل به این نتیجه رسیدم که درواقع useState در functional components مشابه this.setState در class components است .
در واقع میتوان componentDidMount, componentDidUpdate و componentWillUnmount ها را به وسیله ی useEffect پیاده سازی کنیم .
طبق تعریف وب سایت رسمی کتابخوانه ی React :
The Effect Hook lets you perform side effects in function components
برای درک بهتر ، به مثال زیر توجه کنید :
هوک useEffect در کد بالا دقیقا هنگام هرآپدیت count صدا زده میشود . همچنین هنگام mount شدن Counter نیز یک بار اجرا میشود . به عبارت دیگر کد بالا در class components به صورت زیر عمل میکند :
هوک useEffect یک پارامتر را به عنوان ورودی دریافت میکند . درصورتی که این پارامتر به آن ارسال نشود هم به عنوان componentDidMount و هم به عنوان componentDidUpdate عمل میکند.
ورودی های این هوک باید به صورت یک آرایه باشد . در صورتی که آرایه ارسالی خالی ارسال شود مشابه comopnentDidMount عمل میکند و در صورتی که پارامتری به آن ارسال شود در صورت تغییر مقدار آن پارامتر این هوک اجرا میشود .
به مثال زیر توجه کنید :
در شکل زیر در صورتی که مقدار count تغییر کند useEffect اجرا میشود .
و در شکل زیر هم هنگام mountشدن کامپوننت Counter ، useEffect اجرا میشود .
نکته : برای انجام عملیات مختلف از useEffect های جداگانه استفاده شود.
برای پیاده سازی componentWillUnmount نیز باید داخل useEffect یک تابع را برگردانیم. به مثال زیر توجه کنید :
در صورتی که کد بالا رو اجرا کنید متوجه خواهید شد که عبارت component will Unmount پس از هردفعه اجرای useEffect اجرا میشود ( تا آخرین اجرای useEffect cleanup بکند). در واقع این ویژگی باعث قدرتمندتر شدن useEffect نسبت به componentWillUnmount میشود.
