خب آقای 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