Frontend hay gặpkey cho React danh tính ổn định của mỗi phần tử trong danh sách qua các lần render. Nhờ đó khi diff, React biết phần tử nào được giữ, thêm, xóa, hay đổi chỗ thay vì dựng lại toàn bộ.
Vì sao không nên dùng array index làm key: khi danh sách bị thêm/xóa/sắp xếp lại, index gắn với vị trí chứ không gắn với dữ liệu → React ghép nhầm phần tử cũ với dữ liệu mới. Hậu quả:
- State cục bộ lệch (giá trị input, checkbox dính nhầm dòng).
- Render sai hoặc cập nhật DOM thừa.
Đúng: dùng id ổn định, duy nhất từ dữ liệu (item.id).
Lưu ý:
- key chỉ cần duy nhất giữa các anh em, không cần toàn cục.
- Dùng index chỉ tạm chấp nhận khi danh sách tĩnh, không đổi thứ tự, không có state cục bộ.
- key là gợi ý cho React, không truyền xuống làm prop của component.