Dùng index của mảng làm `key` sai ở chỗ nào? Khi nào thì vẫn chấp nhận được?

key là danh tính của item giữa hai lần render — React dùng nó để quyết định giữ hay huỷ state và DOM node của phần tử.

Index chỉ là vị trí, nên khi danh sách thay đổi thứ tự, danh tính bị gán nhầm.

// insert an item at the head: every index shifts by one
{todos.map((todo, i) => <TodoRow key={i} todo={todo} />)}

Triệu chứng điển hình:
- Xoá dòng thứ 2 nhưng giá trị input của dòng 3 nhảy lên dòng 2 — state nội bộ (input chưa controlled, checkbox, trạng thái mở/đóng) bám theo index nên bị dính nhầm item.
- Sắp xếp lại danh sách khiến React phải cập nhật nội dung mọi dòng thay vì chỉ di chuyển node.
- Animation vào/ra chạy sai phần tử.

Dùng id ổn định từ dữ liệu (todo.id). Nếu backend không trả id, sinh id lúc thêm item vào state, không sinh trong lúc render (Math.random() trong render tạo key mới mỗi lần → mất toàn bộ state).

Index chấp nhận được khi danh sách chỉ đọc, không sắp xếp, không thêm/xoá ở giữa và item không giữ state riêng — ví dụ render tĩnh một mảng cố định.