คู่มือการจัดการ Event ใน React

หน้าเว็บของคุณโหลดใหม่ทั้งหมดทุกครั้งที่คลิกปุ่มหรือไม่? ช่องกรอกข้อมูลของคุณไม่ยอมอัปเดต state ขณะที่คุณพิมพ์หรือเปล่า? คุณอาจพบปัญหาเหล่านี้หากจัดการ event ใน React ไม่ถูกต้อง

การจัดการ event คือการดักจับการกระทำของผู้ใช้ เช่น การคลิก (click), การส่งฟอร์ม (submit) หรือการเปลี่ยนแปลงข้อมูล (change) และตอบสนองต่อการกระทำเหล่านั้น React ใช้ระบบที่เรียกว่า SyntheticEvent ซึ่งช่วยให้มั่นใจได้ว่าโค้ดของคุณจะทำงานเหมือนกันในทุกเบราว์เซอร์ เช่น Chrome, Safari และ Firefox

ความแตกต่างที่สำคัญระหว่าง HTML และ React events:

  • การตั้งชื่อ: ใช้ camelCase ใน React โดยใช้ onClick แทน onclick
  • Handlers: ใน React ให้ส่งค่าเป็น function reference โดยใช้เครื่องหมายปีกกาแทนการใช้ string
  • การป้องกัน: เรียกใช้ event.preventDefault() เสมอเพื่อหยุดการทำงานเริ่มต้นของเบราว์เซอร์

วิธีที่ React จัดการกับ event:

React ไม่ได้แนบ listener ไปยังทุกๆ node แต่จะใช้ระบบ Event Delegation โดยการแนบ listener เพียงตัวเดียวไว้ที่ root element ซึ่งช่วยประหยัดหน่วยความจำและเพิ่มประสิทธิภาพการทำงาน

รูปแบบที่พบบ่อยในการใช้งาน:

  • Click Counter: ใช้ function เพื่ออัปเดต state เมื่อผู้ใช้คลิกปุ่ม
  • Form Handling: ใช้ event.target.name และ event.target.value เพื่ออัปเดตช่อง input หลายช่องด้วย function เดียวกัน และควรใช้ event.preventDefault() ในการส่งฟอร์มเสมอเพื่อป้องกันไม่ให้หน้าเว็บโหลดใหม่
  • การส่ง Arguments: หากคุณต้องการส่ง ID ไปยัง function ให้ใช้ arrow function โดยเขียนเป็น onClick={() => handleDelete(id)} อย่าเขียนเป็น onClick={handleDelete(id)} เพราะมันจะทำงานทันทีในระหว่างการ render

ข้อผิดพลาดที่ควรหลีกเลี่ยง:

  • Infinite Loops: อย่าเรียกใช้ function โดยตรงใน attribute onClick เพราะจะทำให้เกิดการอัปเดต state ในระหว่างการ render ซึ่งจะส่งผลให้เกิดการ render ซ้ำไปเรื่อยๆ
  • Undefined Events: หากคุณจำเป็นต้องเรียกใช้ preventDefault() อย่าลืมใส่ parameter event ไว้ในคำจำกัดความของ function เสมอ
  • Memory Leaks: หากคุณเพิ่ม listener ด้วยตัวเอง เช่น window.addEventListener ภายใน useEffect hook อย่าลืมลบออกใน cleanup function เสมอ

แนวทางปฏิบัติที่ดีที่สุดเพื่อประสิทธิภาพ:

  • หลีกเลี่ยงการสร้าง function ใหม่ภายใน loop .map() หากรายการของคุณมีขนาดใหญ่มาก
  • ใช้ useCallback hook เมื่อต้องส่ง handlers ไปยัง child components
  • ทำการ cleanup custom event listeners เพื่อให้แอปพลิเคชันของคุณทำงานได้อย่างรวดเร็ว

การเชี่ยวชาญเรื่อง event คือหัวใจสำคัญในการสร้างแอปพลิเคชัน React ที่มีการตอบโต้กับผู้ใช้ (interactive)

ที่มา: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69