اصول React Hook
از استفاده از useEffect برای همه چیز دست بردارید. بسیاری از توسعهدهندگان از این هوک به اشتباه استفاده میکنند. این کار باعث ایجاد باگ میشود و خواندن کد را دشوار میکند.
استفاده از useEffect را محدود کنید.
سعی کنید در هر صفحه تنها از یک useEffect استفاده کنید. استفاده از هوکهای متعدد برای یک state مشابه باعث سردرگمی میشود. شما دیگر نمیتوانید تشخیص دهید که کدام هوک، کدام state را بهروزرسانی میکند.
از استفاده از useEffect برای رویدادهای کاربر (user events) خودداری کنید.
از useEffect برای کلیکها یا ضربهها (taps) استفاده نکنید. در عوض از event handlerها استفاده کنید.
- بد: استفاده از useEffect برای بهروزرسانی state پس از یک کلیک.
- خوب: استفاده از تابعی مانند onClickBar برای بهروزرسانی state.
انواع رویدادهایی که باید بشناسید:
- ناوبری صفحه (page navigation) و رندرهای اولیه.
- تغییرات اتصال شبکه.
- بهروزرسانیهای WebSocket یا سرور به صورت real-time.
اقدامات کاربر مانند کلیکها نباید در useEffect باشند. برای این اقدامات از event handlerهای مستقیم استفاده کنید.
کامپوننتها را بر اساس props جدا کنید.
اگر از یک prop از نوع boolean برای تغییر منطق استفاده میکنید، کامپوننت خود را تقسیم کنید. یک کامپوننت واحد نسازید که همزمان مسئول ایجاد و بهروزرسانی دادهها باشد.
یک کامپوننت واحد با دستورات "if" زیاد، بیش از حد بزرگ میشود. این موضوع نگهداری از اپلیکیشن را دشوار میکند.
- بد: یک کامپوننت با یک prop به نام "isAdd" که فیلدهای فرم را تغییر میدهد.
- خوب: ایجاد یک "RegisterComponent" و یک "UpdateComponent".
کامپوننتهای کوچک راحتتر تست میشوند. آنها سریعتر اجرا میشوند و تمیز باقی میمانند.
منبع: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31