راهنمای مدیریت رویدادها در React

آیا وقتی روی یک دکمه کلیک می‌کنید، کل صفحه وب شما دوباره بارگذاری می‌شود؟ آیا فیلد ورودی شما هنگام تایپ کردن، state را به‌روزرسانی نمی‌کند؟ اگر رویدادها را در React به درستی مدیریت نکنید، ممکن است با این مشکلات مواجه شوید.

مدیریت رویداد به معنای دریافت اقدامات کاربر مانند کلیک‌ها، ارسال‌ها (submits) یا تغییرات و پاسخ دادن به آن‌هاست. React از سیستمی به نام SyntheticEvent استفاده می‌کند. این امر تضمین می‌کند که کد شما در تمام مرورگرها مانند Chrome، Safari و Firefox به یک شکل عمل کند.

تفاوت‌های کلیدی بین رویدادهای HTML و React:

  • نام‌گذاری: در React از camelCase استفاده کنید. به جای onclick از onClick استفاده کنید.
  • هندلرها: در React یک ارجاع به تابع (function reference) را پاس دهید. به جای رشته‌ها (strings) از آکولاد استفاده کنید.
  • جلوگیری: همیشه برای متوقف کردن رفتار پیش‌فرض مرورگر، event.preventDefault() را فراخوانی کنید.

نحوه مدیریت رویدادها توسط React:

React شنونده‌ها (listeners) را به تک‌تک گره‌ها (nodes) متصل نمی‌کند، بلکه از Event Delegation استفاده می‌کند. این روش یک شنونده واحد را به عنصر ریشه (root element) متصل می‌کند که باعث صرفه‌جویی در حافظه و بهبود عملکرد می‌شود.

الگوهای رایج برای استفاده:

  • شمارنده کلیک: از یک تابع برای به‌روزرسانی state زمانی که کاربر روی یک دکمه کلیک می‌کند، استفاده کنید.
  • مدیریت فرم: از event.target.name و event.target.value برای به‌روزرسانی چندین فیلد ورودی با یک تابع استفاده کنید. همیشه هنگام ارسال فرم از event.preventDefault() استفاده کنید تا از بارگذاری مجدد صفحه جلوگیری شود.
  • پاس دادن آرگومان‌ها: اگر نیاز دارید یک ID را به یک تابع پاس دهید، از یک arrow function استفاده کنید. بنویسید onClick={() => handleDelete(id)}. هرگز ننویسید onClick={handleDelete(id)} زیرا این کار باعث می‌شود تابع بلافاصله در حین رندر اجرا شود.

از این اشتباهات دوری کنید:

  • حلقه‌های بی‌نهایت: هرگز یک تابع را مستقیماً در ویژگی onClick فراخوانی نکنید. این کار باعث به‌روزرسانی state در حین رندر می‌شود که خود باعث رندر مجدد می‌گردد.
  • رویدادهای تعریف نشده: اگر نیاز دارید preventDefault() را فراخوانی کنید، همیشه پارامتر event را در تعریف تابع خود بگنجانید.
  • نشت حافظه (Memory Leaks): اگر شنونده‌های دستی مانند window.addEventListener را در یک هوک useEffect اضافه می‌کنید، همیشه آن‌ها را در تابع پاک‌سازی (cleanup function) حذف کنید.

بهترین روش‌ها برای عملکرد بهتر:

  • اگر لیست شما بسیار بزرگ است، از ایجاد توابع جدید در داخل حلقه .map() خودداری کنید.
  • هنگام پاس دادن هندلرها به کامپوننت‌های فرزند، از هوک useCallback استفاده کنید.
  • برای سریع نگه داشتن اپلیکیشن خود، شنونده‌های رویداد سفارشی را پاک‌سازی کنید.

تسلط بر رویدادها، کلید ساخت اپلیکیشن‌های تعاملی در React است.

منبع: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69