تفاوت useEffect و useLayoutEffect در ریکت

شاید شما بارها از هوک های useEffect و useLayoutEffect در ریکت استفاده کرده باشید اما ندونسته باشید که تفاوت اونا چیه و باید کجا از اون ها استفاده کنید. اگر دوست دارید با تفاوت useEffect و useLayoutEffect آشنا بشید با من همراه باشید.

تفاوت useEffect و useLayoutEffect چیست؟

خب بدون توضیحات اضافی به سراغ اصل مطلب میریم.

تو گام اول باید بدونید که useLayoutEffect نوعی useEffect هست و هر دو سینتکس کاملا مشابهی دارند و شما می تونید کارهای مشابه رو با هر دو انجام بدید.

useEffect(() => {
  // do something
}, [dependencies])

useLayoutEffect(() => {
  // do something
}, [dependencies])

useEffect و useLayoutEffect

useEffect بعد از اینکه کامپوننت شما توسط ریکت رندر شد، اجرا میشه. در واقع ابزاری برای مدیریت بهتر ساید افکت ها هست. حالا شاید بپرسید ساید افکت (side effect) چی هست؟ در واقع به عملیات هایی که بیرون از فضای کامپونت ایجاد میشه و ما نمیتونیم اونارو پیش بینی کنیم side effect میگیم. اگر بخوام مثال بزنم به درخواست یک api اشاره میکنم که ریسپانس دریافتی مشخص نیست و ممکنه یک داده باشه یا خطای 500. البته تابع های setTimeout و setInterval هم ساید افکت محسوب میشن!

اگر بخواهیم با استفاده از useEffect، مدل dom رو قبل اینکه کامپوننت رندر کنیم ناموفق خواهیم بود! چون useEffect بعد از dom اجرا میشه! حالا از خودت میپرسی مشکل چیه؟ در واقع کاربر میتونه قبل اینکه تغییرات بصری بصورت کامل اجرا بشه dom اولیه ما رو ببینه! خب خداروشکر ما اینجا میتونیم از useLayoutEffect استفاده کنیم و جلوی این مشکل رو بگیریم!

حالا بیاید با هم این مثال رو بررسی کنیم. تا با تفاوت useEffect و useLayoutEffect  بیشتر آشنا بشیم.

const ref = React.useRef()
React.useEffect(() => {
  ref.current = 'some value'
})
React.useLayoutEffect(() => {
  console.log(ref.current) 
})

شاید اگر تفاوت زمان اجرای useEffect و useLayoutEffect رو متوجه نمی شدید، در نگاه اول توقع داشتید که مقدار some value لاگ گرفته بشه اما حالا که آشنا شدید میفهمید که اول useLayoutEffect اجرا میشه و کنسول مقدار قبلی اینپوت رو لاگ میگیره!

اگر تغییرات dom شما غیر قابل مشاهده است و نیاز آنچنانی به تعامل با dom ندارید، سعی کنید همیشه از useEffect استفاده کنید، از طرف دیگر هنگام تعامل پیچیده با کاربر که با انیمیشن ها و به خصوص ref سروکار دارید، سعی کنید از useLayoutEffect بجای useEffect استفاده کنید.

امیدوارم با تفاوت useEffect و useLayoutEffect آشنا شده باشید. اگر نیاز بیشتر به توضیحات تخصصی بیشتر دارید لطفا این منبع رو دنبال کنید.