Khi bạn render một danh sách, React cần một cách để biết phần tử nào là phần tử nào giữa các lần render để tái sử dụng, sắp xếp lại, chèn hoặc xóa các nút DOM đúng cách. key chính là danh tính đó.
{users.map(user => (
<Row key={user.id} user={user} /> // id ổn định, duy nhất
))}
Dùng index làm key nói với React "phần tử ở vị trí 0 là cùng một phần tử như trước" — điều này hỏng ngay khi danh sách sắp xếp lại, hoặc bạn chèn/xóa từ đầu:
// items: [A, B, C] với key 0,1,2
// bạn XÓA A → [B, C], key thành 0,1
// React nghĩ key 0 (từng là A) giờ là B, key 1 (từng là B) giờ là C...
// nên nó giữ trạng thái DOM sai với phần tử sai.
Một triệu chứng thực tế: một danh sách input mà gõ vào một hàng "nhảy" sang hàng khác sau khi xóa/sắp xếp, vì React tái dùng <input> sai (cùng value/focus nội bộ của nó).
user.id, một slug).Key là một gợi ý cho thuật toán reconciliation; làm đúng chúng giữ cả hiệu năng và state của component chính xác.