หลักการของ React Hook

เลิกใช้ useEffect กับทุกอย่างเสียที นักพัฒนาหลายคนใช้ hook นี้ผิดวิธี ซึ่งทำให้เกิดบั๊กและทำให้โค้ดอ่านยาก

จำกัดการใช้งาน useEffect

พยายามใช้ useEffect เพียงหนึ่งตัวต่อหนึ่งหน้า การใช้ hook จำนวนมากกับ state เดียวกันจะทำให้เกิดความสับสน คุณจะเริ่มติดตามไม่ได้ว่า hook ตัวไหนกำลังอัปเดต state ตัวไหนอยู่

เลิกใช้ useEffect สำหรับเหตุการณ์ที่เกิดจากผู้ใช้ (user events)

อย่าใช้ useEffect สำหรับการคลิก (clicks) หรือการแตะ (taps) ให้ใช้ event handlers แทน

ประเภทของเหตุการณ์ที่คุณควรทราบ:

การกระทำของผู้ใช้ เช่น การคลิก ไม่ควรอยู่ใน useEffect ให้ใช้ event handlers โดยตรงสำหรับการกระทำเหล่านี้

แยกคอมโพเนนต์ตาม props

หากคุณใช้ boolean prop เพื่อเปลี่ยนตรรกะ (logic) ให้แยกคอมโพเนนต์ของคุณออกมา อย่าสร้างคอมโพเนนต์เดียวที่ทำหน้าที่ทั้งการสร้าง (creating) และการอัปเดต (updating) ข้อมูล

คอมโพเนนต์เดียวที่มีคำสั่ง "if" จำนวนมากจะขยายใหญ่เกินไป ซึ่งทำให้แอปพลิเคชันดูแลรักษาได้ยาก

คอมโพเนนต์ขนาดเล็กทดสอบได้ง่ายกว่า ทำงานได้เร็วกว่า และรักษาความสะอาดของโค้ดได้ดีกว่า

ที่มา: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31