เมื่อคุณ render รายการ React ต้องการวิธีการรู้ว่า รายการไหนคือรายการไหน ระหว่าง render เพื่อให้สามารถนำกลับมาใช้ เรียงลำดับใหม่ แทรก หรือลบโหนด DOM ได้อย่างถูกต้อง key คือ identity นั้น
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
การใช้ index เป็น key บอก React ว่า "รายการที่ตำแหน่ง 0 เป็นรายการเดียวกับเมื่อก่อน" — ซึ่งจะหยุดทำงานทันทีที่รายการถูกเรียงลำดับใหม่ หรือคุณแทรก/ลบจากด้านหน้า:
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
อาการจริง: รายการ input ที่การพิมพ์ในหนึ่งแถว "กระโดด" ไปที่อีกแถวหนึ่งหลังจากการลบ/เรียงลำดับ เพราะ React นำ <input> ที่ผิด กลับมาใช้ (และ value/focus ภายใน)
user.id slug)Keys เป็นคำแนะนำให้อัลกอริทึม reconciliation สามารถได้มาซึ่งการทำให้ถูกต้องเก็บรักษาทั้งประสิทธิภาพและสถานะ component ไว้อย่างถูกต้อง