ทำไมคุณถึงต้องใช้ React Key Prop

คุณจะเห็นคำเตือนนี้ใน console: "Each child in a list should have a unique 'key' prop."

นักพัฒนาหลายคนมักจะมองข้ามมัน ซึ่งนี่คือความผิดพลาด เพราะ key prop ไม่ได้เป็นเพียงแค่คำเตือน แต่มันคือเครื่องมือสำหรับเพิ่มประสิทธิภาพและป้องกันการเกิดบั๊ก

key prop ทำหน้าที่อะไร?

React ใช้ key เพื่อระบุรายการในลิสต์ (list items) มันจะบอก React ว่ารายการไหนมีการเปลี่ยนแปลง, ย้ายตำแหน่ง หรือถูกลบออกไป

หากไม่มี key ตัว React จะต้องทำการ re-render ลิสต์ทั้งหมดใหม่ ซึ่งจะทำให้แอปของคุณช้าลงและทำให้เกิดบั๊กของข้อมูลได้

ตัวอย่างเปรียบเทียบกับห้องสมุด

ลองจินตนาการถึงห้องสมุดที่มีหนังสือ 1,000 เล่ม หากคุณเพิ่มหนังสือเล่มใหม่เข้าไปตรงกลาง คุณจะต้องขยับหนังสือเล่มอื่นๆ ทุกเล่มเพื่อสร้างพื้นที่ว่าง

ใน React นั้น key จะทำหน้าที่เป็น ID ที่ไม่ซ้ำกัน ซึ่งช่วยให้ทุก element มีตัวตน (identity) ในระหว่างกระบวนการ reconciliation ตัว React จะทำการเปรียบเทียบลิสต์ใหม่กับลิสต์เก่า

ปัญหาของการไม่ใส่ key

หากคุณข้ามการใส่ key ตัว React จะคิดว่าทุกรายการเหมือนกันหมด หากคุณเพิ่มรายการหนึ่งรายการที่จุดเริ่มต้น React จะคิดว่าลิสต์ทั้งหมดมีการเปลี่ยนแปลง และจะทำการสร้าง element ทุกตัวใน DOM ขึ้นมาใหม่ ซึ่งเป็นการสิ้นเปลืองหน่วยความจำ (memory) และ CPU

กับดักของ Index

นักพัฒนาหน้าใหม่มักจะใช้ array index เป็น key ตัวอย่าง: key={index}

วิธีนี้อันตรายมากสำหรับลิสต์ที่มีการเปลี่ยนแปลงตลอดเวลา (dynamic lists) หากคุณมีการเรียงลำดับ (sort), กรองข้อมูล (filter) หรือลบรายการออก ค่า index จะเปลี่ยนไป ซึ่งจะนำไปสู่สถานะ UI ที่ผิดพลาดและเกิดบั๊กได้

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Keys

• ใช้ ID ที่มีความเสถียรจากฐานข้อมูลของคุณ (เช่น user.id)
• ตรวจสอบให้แน่ใจว่า key ของแต่ละรายการไม่ซ้ำกันในกลุ่มพี่น้อง (siblings) เดียวกัน
• หลีกเลี่ยงการใช้ Math.random() เป็น key เพราะมันจะเปลี่ยนค่าทุกครั้งที่มีการ render และทำให้ UI เกิดอาการกระพริบ (flickering)
• หากข้อมูลของคุณไม่มี ID ให้สร้างขึ้นมาโดยใช้ uuid หรือ nanoid ในตอนที่คุณดึงข้อมูล (fetch data)

คู่มือการเลือก Key

• Database ID: ดีที่สุด มีความเสถียรสูงและรวดเร็ว • Array Index: ใช้เฉพาะกับลิสต์แบบคงที่ (static lists) ที่ไม่มีการเปลี่ยนแปลงเท่านั้น • Math.random(): ควรหลีกเลี่ยง เพราะจะทำให้เกิดการ re-mount ที่ไม่จำเป็น

สรุป

การใช้ key ที่ดีจะช่วยให้แอปของคุณทำงานเร็วขึ้น โดยสามารถลดการ re-render ที่ไม่จำเป็นได้ถึง 40% ควรให้ความสำคัญกับตัวระบุ (identifiers) ที่มีความเสถียรและไม่ซ้ำกันเสมอ

แหล่งที่มา: https://dev.to/banti_kevat_8e2d123bb7994/react-me-key-prop-kyun-zaroori-hai-warning-solve-in-hindi-49dk