เชี่ยวชาญการใช้ Lists และ Keys ใน React
การเรนเดอร์ลิสต์ใน React นั้นง่าย แต่การทำอย่างถูกต้องนั้นยาก
นักพัฒนาหลายคนใช้ array index เป็น key ซึ่งเป็นข้อผิดพลาด เพราะมันนำไปสู่บั๊กและประสิทธิภาพที่ช้าลง
นี่คือวิธีที่คุณควรจัดการกับข้อมูลแบบไดนามิกใน React
วิธีที่ React ใช้ Lists
React ใช้เมธอด map() เพื่อเปลี่ยน array ให้เป็น UI elements เมื่อคุณใช้ map() React จะแปลงข้อมูลแต่ละชิ้นให้กลายเป็น component
บทบาทของ Keys
React ใช้ Virtual DOM เมื่อข้อมูลเปลี่ยน React จะเปรียบเทียบข้อมูลใหม่กับข้อมูลเก่า กระบวนการนี้เรียกว่า reconciliation
Keys ทำหน้าที่เป็นตัวระบุเอกลักษณ์ (unique identifiers) ซึ่งจะบอก React อย่างชัดเจนว่ารายการใดที่เปลี่ยนไป, ถูกย้าย หรือถูกลบออก
ทำไมการใช้ Index เป็น Key ถึงอันตราย
การใช้ index (0, 1, 2...) เป็น key ก่อให้เกิดปัญหาหลัก 3 ประการ:
- Component State Errors: หากคุณเรียงลำดับลิสต์ใหม่ ช่องกรอกข้อมูล (input fields) หรือ checkbox อาจแสดงข้อมูลผิดรายการ
- Performance Drops: React ไม่สามารถติดตามได้ว่ารายการไหนเป็นรายการไหน ทำให้บ่อยครั้งต้องเรนเดอร์ลิสต์ใหม่ทั้งหมดแทนที่จะเรนเดอร์เพียงรายการเดียว
- Visual Bugs: UI ของคุณอาจดูถูกต้อง แต่ตรรกะภายในจะทำงานผิดพลาดเมื่อมีการขยับตำแหน่งของรายการ
วิธีการใช้ Keys ที่ถูกต้อง
เพื่อให้แอปของคุณทำงานได้รวดเร็วและเสถียร ให้ปฏิบัติตามกฎเหล่านี้:
- ใช้ Unique IDs: ให้ใช้ ID จากฐานข้อมูลของคุณเสมอ (เช่น UUID หรือ primary key)
- ห้ามใช้
Math.random(): การสร้าง key ระหว่างการเรนเดอร์จะทำให้ React ต้องสร้าง element ใหม่ทั้งหมดในทุกๆ การอัปเดต ซึ่งจะทำลายประสิทธิภาพอย่างมาก - รักษาความเสถียรของ Key: Key จะต้องคงเดิมสำหรับข้อมูลชิ้นเดิมตลอดวงจรชีวิต (lifecycle) ของมัน
เปรียบเทียบให้เห็นภาพ
Feature: Stability Using Index: Unstable Using Unique ID: Highly Stable
Feature: Performance Using Index: Poor Using Unique ID: Optimal
Feature: State Safety Using Index: Unsafe Using Unique ID: 100% Safe
สรุปสำหรับนักพัฒนา
ใช้เมธอด map() และส่ง ID ที่ไม่ซ้ำกันและมีความเสถียรไปยัง prop key หลีกเลี่ยงการใช้ array index สำหรับลิสต์ใดๆ ที่สามารถเปลี่ยนแปลง, เรียงลำดับ หรือกรองข้อมูลได้