خطا: تابع useEffect باید یک تابع cleanup برگردونه یا هیچ چیزی برنگردونه (React)
React Hook Warnings for async function in useEffect
من دارم از React Hooks استفاده می‌کنم و سعی دارم توابع async رو داخل useEffect استفاده کنم. وقتی این کار رو می‌کنم، یک هشدار دریافت می‌کنم که میگه تابع useEffect باید یک تابع cleanup برگردونه یا اصلا چیزی برنگردونه. ولی تابع async من نیاز داره که منتظر بمونه (await) و به همین خاطر داره به صورت ضمنی یه Promise برمی‌گردونه. چطور می‌تونم این مشکل رو برطرف کنم؟
مشکل اینجاست که useEffect نباید یک Promise رو برگردونه. وقتی که یک تابع async داخل useEffect تعریف می‌کنی، اون تابع به صورت پیش‌فرض یک Promise برمی‌گردونه و این موضوع باعث میشه که React به اشتباه فکر کنه که باید منتظر چیزی بمونه یا نیاز به cleanup داره. ولی در واقع این طور نیست و برای همین این هشدار رو دریافت می‌کنی.
برای حل این مشکل، بهترین راه اینه که تابع async رو به صورت داخلی داخل useEffect فراخوانی کنی، به جای اینکه مستقیم توی خود useEffect تعریفش کنی. در این صورت، useEffect هیچ Promise ای برنمی‌گردونه و هشدار از بین میره.
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
};
fetchData();
}, []); // Dependencies
در این مثال، تابع fetchData به صورت async تعریف شده و داخل useEffect فراخوانی شده. useEffect حالا دیگه هیچ Promise ای برنمی‌گردونه و فقط یک تابع رو اجرا می‌کنه !