#استخدامی

خب آقای X، خانم Y، یه سوال React خفن!

سوال : useEffect  چی هستش اصلا کی به کار مون میادش  و چطور جلوی  (render) رندرای بی‌موردشو بگیریم؟ 

آقا  useEffect مثل یه دستیار باهوشه که می‌گه : «هی، اگه بخوای یه کار جانبی (side effect) تو کامپوننتت انجام بدی، من اینجام!» ✌🏻🌹

این کارای جانبی چی‌ان؟  دریافت داده از API
تغییر چیزی تو DOM (مثلاً تغییر title صفحه) 
تنظیم تایمر یا interval (مثلاً یه تایمر شمارش معکوس) 
اشتراک (subscribe) به یه سرویس (مثلاً WebSocket)

به عبارتی، هر چیزی که بخوای «خارج از رندر معمولی» کامپوننت انجام بدی، useEffect جای اونه!

مثال:

  useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(data => setUsers(data));
})


مشکل کجاست؟😅🤏🏻

اگه حواست نباشه، useEffect هی رندر می‌کنه و اپ‌تو کند می‌کنه! 

راه‌حل: چطور جلوی رندر بی‌مورد رو بگیریم؟

اولی و اصلیش اینه که Dependency Array رو درست کن!


💥 همیشه یه آرایه به عنوان آرگومان دوم useEffect بده. این آرایه می‌گه useEffect کی باید اجرا بشه:

▫ [] → فقط یه بار موقع mount کامپوننت اجرا می‌شه (مثل componentDidMount).

▫ خالی نباشه یعنی  [variable] → هر وقت متغیر داخل آرایه تغییر کنه، useEffect اجرا می‌شه. 

▫ بدون آرایه → هر بار رندر، useEffect اجرا می‌شه (خطرناکه!).


⛔⛔⛔ پس کد بالا اصلا بهینه نیستش !!!


useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(data => setUsers(data));
},[])


این درستشه ⚡


یه سوال خفن دیگه!

اومدن تو مصاحبه گفتن: «اگه بخوای useEffect فقط یه بار موقع لود کامپوننت اجرا بشه، چی کار می‌کنی؟»
جواب: یه آرایه خالی ([]) می‌ذاری!


سیو کن این پستو! اگه این سبک سوال و جواب به دلت نشست، یه 🔥 بذار و بگو بعدی چی باشه!   

🌐devsub.ir
@developersubtitle

هوک جدید Next.js که میتونه چند لول UX اپ شمارو بهتر کنه.

اسمش useLinkStatus هست و میاد و وضعیت لودینگ کامپوننت Link والدش رو مشخص میکنه و اگر درحال لودینگ بود pending رو true بر میگردونه.

به این صورت دغدغه بزرگ لودینگ پیج ها حل میشه و متونیم به راحتی در UI به کاربر نمایشش بدیم.


لینک رفرنس:

https://nextjs.org/docs/app/api-reference/functions/use-link-status



دیگه لازم نیست بیایم اقا یه useState برای لودینگمون بزاریم هر جا داره دیتا میاد true کنیم هر جام دیتا تموم شد فالسش کنیم

موفق باشید 🌹

@developersubtitle

رفقا سلام خوبید
رفقایی که دوره ریکتو تهیه میکنن
با یه لایسنس هم زیرنویس رو دارن هم دوبلرو
دیگه جدا نیست 👍

میتونید تماشا کنید و لذتشو ببرید ❤️