React Js UseState Antipatterns
การเขียนโค้ด React ให้สะอาดจำเป็นต้องมีการจัดการ state ที่ชาญฉลาด รูปแบบการจัดการ state ที่ไม่ดีจะนำไปสู่บั๊กและโค้ดที่ซับซ้อน
หลีกเลี่ยงข้อผิดพลาดทั่วไป 4 ประการนี้:
- รวมข้อมูลที่เกี่ยวข้องกัน
อย่าสร้าง state hooks แยกกันสำหรับค่าที่เปลี่ยนแปลงไปพร้อมกัน
แทนที่จะเป็น:
- const [x, setX] = useState(0);
- const [y, setY] = useState(0);
ให้ใช้ object แทน:
- const [position, setPosition] = useState({ x: 0, y: 0 });
วิธีนี้จะช่วยให้การอัปเดตข้อมูลของคุณสะอาดและเป็นระเบียบ
- หลีกเลี่ยง state ที่ขัดแย้งกัน
เมื่อใช้ boolean หลายตัวในการติดตามกระบวนการเดียวกัน คุณกำลังสร้างบั๊ก
แทนที่จะมี:
- isSubmitting
- isSubmit
ให้ใช้ string ของ status เพียงตัวเดียว:
- status: 'TYPING'
- status: 'SUBMITTING'
- status: 'SUBMITTED'
สร้าง UI logic ของคุณจาก single source of truth เพียงหนึ่งเดียวนี้
- กำจัด state ที่ซ้ำซ้อน
หากคุณสามารถคำนวณค่าได้ในระหว่างการ render อย่าเก็บค่านั้นไว้ใน state
อย่าเก็บ:
- firstName
- lastName
- fullName
เก็บแค่ชื่อและนามสกุล แล้วคำนวณชื่อเต็มแบบ on the fly:
- const fullName = firstName + " " + lastName;
นอกจากนี้ อย่าเก็บ props ไว้ใน state เพราะ state จะถูกกำหนดค่าเริ่มต้นเพียงครั้งเดียว หาก prop เปลี่ยนแปลง state จะไม่ได้รับการอัปเดต ให้ใช้ prop นั้นโดยตรง
- หยุดการเก็บข้อมูลซ้ำซ้อน
อย่าเก็บข้อมูลชุดเดียวกันไว้ใน state สองตัวที่ต่างกัน
หากคุณมีรายการ tasks และ task ที่ถูกเลือก อย่าเก็บ task object ทั้งหมดไว้ในทั้งสองที่ เพราะจะทำให้การอัปเดตทำได้ยาก
แทนที่จะเป็นแบบนั้น:
- เก็บรายการ tasks
- เก็บเฉพาะ selectedTaskId
- ค้นหา task จากรายการโดยใช้ ID นั้นในระหว่างการ render
วิธีนี้จะช่วยให้มั่นใจว่า task ที่เลือกจะตรงกับข้อมูลล่าสุดในรายการของคุณเสมอ
ที่มา: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9