رفع اخطار React: تابع useEffect باید یک تابع تمیزکننده برگرداند یا هیچ چیز برنگرداند

استفاده از تابع async در hook useEffect در React می‌تواند موجب بروز هشدارهایی شود، زیرا useEffect انتظار ندارد که تابعی که به آن داده می‌شود، یک Promise برگرداند. در واقع، تابع callback در useEffect باید هیچ چیزی برنگرداند یا تنها یک تابع تمیزکننده برگرداند.

برای مثال در صورت استفاده از کد زیر:

      useEffect(async () => {
    // ...
}, []);
    

با اخطار زیر مواجه می شویم:

      Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.
    

برای حل این مشکل می‌توانید از راه‌های زیر استفاده کنید:

• استفاده از یک تابع async بدون callback: می‌توانید یک تابع async جداگانه تعریف کرده و آن را درون useEffect فراخوانی کنید. این روش کد را مرتب‌تر و قابل خواندن‌تر می‌کند و به شما اجازه می‌دهد تا مدیریت بهتری بر روی درخواست‌های ناهمزمان داشته باشید. به عنوان مثال:
• استفاده از تابع خودفراخوانی async: در این روش، می‌توانید یک تابع async خودفراخوانی درون useEffect ایجاد کنید که هشدار را برطرف کند:
• استفاده از پکیج‌های کمکی: برای آسان‌تر کردن مدیریت async در useEffect، می‌توانید از پکیج‌هایی مانند use-async-effect استفاده کنید. این پکیج این امکان را می‌دهد تا تابع async را مستقیماً به useEffect پاس دهید.
• مدیریت حالت با Suspense: از React 18 به بعد، می‌توانید از قابلیت Suspense برای بارگذاری داده‌ها استفاده کنید. این قابلیت به شما اجازه می‌دهد تا عملکرد بهتری هنگام کار با داده‌های ناهمزمان داشته باشید. Suspense هنوز یک قابلیت تجربی است و برای استفاده بیشتر در فریمورک‌های پیشنهادی مانند Next.js طراحی شده است.