Tại sao bạn cần prop key trong React
Bạn thấy lỗi 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. Cảnh báo này cho bạn biết về các vấn đề hiệu năng và các lỗi tiềm ẩn.
Prop key là gì?
Nó giúp React xác định các mục cụ thể trong một danh sách. Nó cho React biết mục nào đã thay đổi, di chuyển hoặc bị xóa. Nếu không có key, React sẽ render lại toàn bộ danh sách mỗi khi có bất kỳ thay đổi nào. Điều này làm chậm ứng dụng của bạn.
Hãy tưởng tượng một thư viện có 1000 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 mọi cuốn sách khác để tạo chỗ trống. Một key đóng vai trò như một ID duy nhất cho mỗi cuốn sách. Nó cho phép React tìm chính xác vị trí đó mà không cần phải di chuyển mọi thứ khác.
Quá trình Reconciliation
React sử dụng một thuật toán diffing để so sánh Virtual DOM mới với Virtual DOM cũ.
- State thay đổi.
- React xây dựng một cây (tree) mới.
- React so sánh các cây bằng cách sử dụng các
key. - React chỉ cập nhật các phần tử đã thay đổi.
Sai lầm phổ biến: Sử dụng index của mảng làm key.
Đừng bao giờ sử dụng key={index} nếu danh sách của bạn có sự thay đổi. Nếu bạn thêm hoặc xóa các mục, index của mọi mục sẽ bị thay đổi. React sẽ bị nhầm lẫn và render lại các mục thực tế không hề thay đổi. Điều này gây lãng phí bộ nhớ và dẫn đến các lỗi UI.
Cách khắc phục:
- Sử dụng một ID ổn định từ cơ sở dữ liệu của bạn (như
user.id). - Sử dụng một chuỗi duy nhất như
uuidnếu dữ liệu của bạn thiếu ID. - Tránh sử dụng
Math.random()chokey. Nó tạo ra một ID mới sau mỗi lần render, điều này buộc các component phải re-mount và gây ra hiện tượng nhấp nháy UI.
Các quy tắc thực hành tốt nhất (Best practices):
- Các
keyphải ổn định. - Các
keyphải là duy nhất giữa các phần tử anh em (siblings). - Sử dụng ID từ cơ sở dữ liệu để đạt hiệu năng tốt nhất.
Bảng so sánh Key:
• Database ID: Được khuyến khích. Ổn định và nhanh. • Array Index: Không khuyến khích. Gây ra lỗi khi sắp xếp hoặc lọc. • Math.random(): Nên tránh. Gây ra việc re-mount không cần thiết.
Tóm tắt cho quy trình làm việc của bạn:
Nếu bạn thấy lỗi này, các component của bạn đang thiếu một định danh vĩnh viễn. Hãy kiểm tra phản hồi API để tìm các trường duy nhất như email hoặc ID. Khắc phục điều này để tiết kiệm 30-40% các lần re-render không cần thiết.