key là một prop đặc biệt dạng string hoặc number mà bạn cần truyền vào khi tạo danh sách các element trong React.
Tại sao key quan trọng?
- Định danh phần tử: Giúp React xác định phần tử nào đã thay đổi, được thêm vào, hoặc bị xóa khỏi danh sách.
- Tối ưu hiệu suất (Reconciliation): Nhờ có key, React có thể tái sử dụng các DOM node hiện có một cách chính xác thay vì phá hủy và tạo lại từ đầu, giúp tránh re-render không cần thiết.
Best practices:
- key phải duy nhất giữa các phần tử anh em (siblings).
- Nên dùng ID duy nhất từ dữ liệu (vd: item.id).
- Hạn chế dùng index của mảng làm key nếu danh sách đó có thể bị thay đổi thứ tự, thêm, hoặc xóa, vì nó sẽ gây lỗi hiển thị và mất focus state.