Khóa rất quan trọng

Mỗi phần tử được trả về từ map cần có một key, một nhãn ổn định và duy nhất cho phần tử đó:

{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}

Tại sao? Khi mảng thay đổi, React so sánh danh sách mới với danh sách cũ. Khóa giúp React biết đâu là phần tử nào, nhờ đó React di chuyển các phần tử thay vì dựng lại chúng, đồng thời giữ nguyên trạng thái, tiêu điểm và hoạt ảnh.

Khóa tốt nhất: một id thực tế từ dữ liệu của bạn. Có thể chấp nhận: bất kỳ giá trị nào duy nhất và ổn định cho mỗi phần tử, như tên các loại trái cây của chúng ta. Lựa chọn cuối cùng: chỉ số mảng. Cách này gây lỗi khi sắp xếp lại, vì vị trí không phải là danh tính.