Tại sao bạn cần prop key trong React
Bạn thấy cảnh báo này trong console: "Each child in a list should have a unique 'key' prop."
Nhiều lập trình viên thường bỏ qua nó. Đây là một sai lầm. Prop key không chỉ đơn thuần là một cảnh báo. Nó là một công cụ để tối ưu hiệu suất và ngăn ngừa lỗi.
Prop key có tác dụng gì?
React sử dụng key để xác định các phần tử trong danh sách. Nó cho React biết phần tử nào đã thay đổi, di chuyển hoặc bị xóa.
Nếu không có key, React phải re-render toàn bộ danh sách. Điều này làm chậm ứng dụng của bạn và gây ra các lỗi về dữ liệu.
Ví dụ về thư viện
Hãy tưởng tượng một thư viện có 1.000 cuốn sách. Nếu bạn thêm một cuốn sách mới vào giữa, bạn phải di chuyển tất cả các cuốn sách khác để tạo chỗ trống.
Trong React, key đóng vai trò như một ID duy nhất. Nó cấp cho mỗi phần tử một danh tính. Trong quá trình reconciliation (đối soát), React sẽ so sánh danh sách mới với danh sách cũ.
Vấn đề khi thiếu key
Nếu bạn bỏ qua key, React sẽ nghĩ rằng mọi phần tử đều giống nhau. Nếu bạn thêm một phần tử vào đầu danh sách, React sẽ nghĩ rằng toàn bộ danh sách đã thay đổi. Nó sẽ tạo lại từng phần tử một trong DOM. Điều này gây lãng phí bộ nhớ và CPU.
Cạm bẫy từ Index
Các lập trình viên mới thường sử dụng index của mảng làm key.
Ví dụ: key={index}
Điều này rất nguy hiểm đối với các danh sách động. Nếu bạn sắp xếp, lọc hoặc xóa các phần tử, index sẽ thay đổi. Điều này dẫn đến trạng thái UI không chính xác và phát sinh lỗi.
Các quy tắc thực hành tốt nhất cho Key
- Sử dụng các ID ổn định từ cơ sở dữ liệu của bạn (như
user.id). - Đảm bảo các key là duy nhất giữa các phần tử anh em (siblings).
- Tránh sử dụng
Math.random()làm key. Nó thay đổi sau mỗi lần render và gây ra hiện tượng nhấp nháy UI. - Nếu dữ liệu của bạn thiếu ID, hãy tạo một ID bằng
uuidhoặcnanoidkhi bạn lấy dữ liệu (fetch data).
Hướng dẫn lựa chọn Key
• Database ID: Tốt nhất. Rất ổn định và nhanh chóng. • Array Index: Chỉ sử dụng cho các danh sách tĩnh không bao giờ thay đổi. • Math.random(): Nên tránh. Nó buộc phải re-mount không cần thiết.
Tóm tắt
Một key tốt giúp ứng dụng của bạn nhanh hơn. Nó có thể tiết kiệm tới 40% các lần re-render không cần thiết. Hãy luôn ưu tiên các định danh ổn định và duy nhất.