[React Basics] Thuộc tính key trong React: Hiểu rõ và sử dụng hiệu quả

Khi bắt đầu hành trình với React, có lẽ một trong những cảnh báo đầu tiên bạn gặp trong console là: Warning: Each child in a list should have a unique "key" prop. Lúc đầu, bạn có thể chỉ đơn giản thêm key={index} vào cho cảnh báo biến mất. Nhưng bạn có biết rằng, đằng sau thuộc tính nhỏ bé này là cả một cơ chế cốt lõi giúp React trở nên mạnh mẽ và hiệu quả?

Thuộc tính key trong React: Hiểu rõ và sử dụng hiệu quả

Dưới đây sẽ là một bài viết chuyên sâu, giúp bạn hiểu rõ về key: Nó là gì, tại sao nó lại tối quan trọng, cách chọn key đúng đắn và cả những ứng dụng "bí mật" của nó mà không phải ai cũng biết.

1. "Key" là gì? Hãy coi nó như là "Căn cước công dân" 🪪

Hãy tưởng tượng bạn đang hiển thị một danh sách các phần tử. Đối với mắt người, chúng ta dễ dàng phân biệt chúng. Nhưng với React, làm thế nào nó biết được phần tử nào là phần tử nào sau mỗi lần render?

key chính là một "mã định danh" đặc biệt mà bạn cung cấp cho mỗi phần tử trong một danh sách.

Nó giống như một tấm thẻ căn cước công dân cho mỗi component. React sử dụng key để:

Nhận diện chính xác từng phần tử giữa các lần render.
Theo dõi xem một phần tử đã bị thay đổi, thêm vào hay xóa đi.
Quyết định xem nên tái sử dụng một component đã có hay tạo mới hoàn toàn.

Nói một cách đơn giản, key giúp React trả lời câu hỏi: "À, cái <li> này có phải là cái <li> mà tôi đã thấy ở lần render trước không, hay là một cái hoàn toàn mới?"

const userList = [
  { id: 'u1', name: 'Nguyễn Văn A' },
  { id: 'u2', name: 'Trần Thị B' },
  { id: 'u3', name: 'Lê Văn C' },
]

function UserListComponent() {
  return (
    <ul>
      {userList.map((user) => (
        // `key` ở đây chính là "căn cước" của mỗi người dùng
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

2. Tại sao "key" lại quan trọng đến vậy? Bí mật của thuật toán đối chiếu

Để hiểu tầm quan trọng của key, chúng ta cần tìm hiểu cách React cập nhật giao diện. React sử dụng một cơ chế gọi là Virtual DOM (DOM ảo) và Reconciliation (Thuật toán đối chiếu).

Khi state thay đổi, React sẽ tạo ra một cây Virtual DOM mới và so sánh nó với cây Virtual DOM cũ. Dựa trên sự khác biệt, nó sẽ tính toán cách cập nhật DOM thật một cách hiệu quả nhất. Và key chính là cốt lõi của quá trình so sánh này khi làm việc với danh sách.

Kịch bản 1: KHÔNG có "key" (Cách làm thiếu hiệu quả)

Giả sử ta có danh sách: ['An', 'Bình']. React sẽ render:

<ul>
  <li>An</li>
  <li>Bình</li>
</ul>

Bây giờ, ta chèn 'Hòa' vào đầu danh sách: ['Hòa', 'An', 'Bình']. Không có key, React sẽ so sánh theo thứ tự:

Vị trí 1: DOM cũ là <li>An</li>, DOM mới là <li>Hòa</li>. React nghĩ: "Ồ, nội dung đã thay đổi". Nó sẽ thay đổi nội dung của <li> đầu tiên từ 'An' thành 'Hòa'.
Vị trí 2: DOM cũ là <li>Bình</li>, DOM mới là <li>An</li>. React lại nghĩ: "Nội dung lại thay đổi". Nó thay đổi nội dung của <li> thứ hai từ 'Bình' thành 'An'.
Vị trí 3: DOM cũ không có gì, DOM mới là <li>Bình</li>. React nghĩ: "Ồ, một phần tử mới". Nó sẽ tạo mới một <li> và chèn 'Bình' vào.

Kết quả là 2 lần cập nhật và 1 lần tạo mới. Cực kỳ lãng phí!

Kịch bản 2: CÓ "key" ổn định (Cách làm hiệu quả)

Giả sử ta có danh sách: [{id: 1, name: 'An'}, {id: 2, name: 'Bình'}]. Bây giờ, chèn {id: 3, name: 'Hòa'} vào đầu: [{id: 3, name: 'Hòa'}, {id: 1, name: 'An'}, {id: 2, name: 'Bình'}]. Nhờ có key, React sẽ so sánh thông minh hơn:

React thấy key=1 và key=2 vẫn tồn tại, chỉ là di chuyển vị trí. Nó sẽ giữ nguyên các DOM element tương ứng và chỉ di chuyển chúng.
React thấy key=3 là một key hoàn toàn mới. Nó sẽ tạo mới một DOM element cho 'Hòa' và chèn vào đúng vị trí.

Kết quả là 1 lần tạo mới và 2 lần di chuyển (rẻ hơn nhiều so với thay đổi nội dung). Điều này không chỉ tăng hiệu năng mà còn tránh được các lỗi không mong muốn liên quan đến state của component con.

3. Chọn "key" như thế nào cho đúng?

⭐ Quy tắc vàng

Một key lý tưởng phải thỏa mãn 3 điều kiện:

Unique (Duy nhất): key phải là duy nhất trong số các anh em của nó (siblings), không cần phải duy nhất toàn cục.
Stable (Ổn định): key của một mục dữ liệu không được thay đổi giữa các lần render. user.id luôn là user.id.
Predictable (Dự đoán được): Bạn có thể xác định key dựa trên dữ liệu.

✅ Lựa chọn tốt nhất: ID từ dữ liệu

Đây là lựa chọn hoàn hảo nhất. Hầu hết dữ liệu từ API đều có một mã định danh duy nhất như id, uuid, sku...

// TỐT NHẤT
items.map((item) => <Component key={item.id} />)

⚠️ Lựa chọn nguy hiểm: Index của mảng

Đây là "cám dỗ" mà nhiều lập trình viên mới mắc phải. Sử dụng index làm key có thể gây ra các lỗi nghiêm trọng về hiệu năng và dữ liệu.

Tại sao nó nguy hiểm? index không ổn định. Nếu bạn:

Thêm một phần tử vào đầu/giữa mảng.
Xóa một phần tử khỏi mảng.
Sắp xếp lại mảng.

Thì index của các mục dữ liệu sẽ thay đổi hoàn toàn. Điều này phá vỡ mục đích của key, khiến React nhận diện sai phần tử, dẫn đến việc render lại không cần thiết và các lỗi logic khó lường, đặc biệt là với các component có state riêng (ví dụ như các ô input trong danh sách).

Khi nào có thể dùng index? Chỉ có một trường hợp duy nhất bạn có thể cân nhắc dùng index:

Danh sách là hoàn toàn tĩnh (không bao giờ thêm, xóa, sắp xếp lại).
Các mục trong danh sách không có ID ổn định.
Danh sách không bao giờ được lọc.

Đây là trường hợp rất hiếm. Tốt nhất là hãy tránh nó.

❌ Lựa chọn tồi tệ nhất: Giá trị ngẫu nhiên

Đừng bao giờ sử dụng các giá trị ngẫu nhiên hoặc thay đổi liên tục làm key.

// CỰC KỲ TỒI TỆ - ĐỪNG BAO GIỜ LÀM VẬY
items.map((item) => <Component key={Math.random()} />)
items.map((item) => <Component key={new Date().getTime()} />)

Làm như vậy sẽ khiến key thay đổi sau mỗi lần render. React sẽ nghĩ rằng toàn bộ danh sách là mới, và nó sẽ hủy component cũ và tạo lại toàn bộ component mới, làm sập hiệu năng và mất toàn bộ state bên trong chúng.

4. "Key" không chỉ dành cho danh sách: Một "Superpower" ẩn giấu

Đây là một kỹ thuật nâng cao: bạn có thể sử dụng key để buộc một component phải "remount" (tải lại từ đầu).

Thông thường, khi props của một component thay đổi, React sẽ chỉ render lại nó. Nhưng nếu bạn thay đổi key của component đó, React sẽ coi đó là một component hoàn toàn mới. Nó sẽ:

Hủy (unmount) instance component cũ (kèm theo toàn bộ state của nó).
Tạo (mount) một instance component hoàn toàn mới với state được khởi tạo lại từ đầu.

Ví dụ thực tế: Bạn có một trang UserProfile hiển thị thông tin người dùng. Khi người dùng chuyển từ xem profile của userA sang userB, bạn muốn component được reset hoàn toàn thay vì phải viết logic phức tạp trong useEffect để xử lý việc thay đổi dữ liệu.

function App() {
  const [userId, setUserId] = useState('userA')

  return (
    <div>
      <button onClick={() => setUserId('userA')}>Xem User A</button>
      <button onClick={() => setUserId('userB')}>Xem User B</button>

      {/* Khi `userId` thay đổi từ 'userA' -> 'userB', `key` cũng thay đổi.
        React sẽ hủy component UserProfile cũ và tạo một cái mới hoàn toàn.
        Điều này đảm bảo state bên trong UserProfile được reset sạch sẽ.
      */}
      <UserProfile key={userId} userId={userId} />
    </div>
  )
}

Đây là một cách cực kỳ mạnh mẽ và gọn gàng để quản lý và reset state của component.

Kết luận: "Key" giúp React hiểu cấu trúc ứng dụng

Thuộc tính key không chỉ là một thứ để "sửa lỗi" cảnh báo trong console. Nó là một công cụ nền tảng, một "chìa khóa vàng" 🔑 giúp React hiểu cấu trúc ứng dụng của bạn để thực hiện các cập nhật một cách thông minh và hiệu quả.

Hãy luôn nhớ:

key là để nhận diện, không phải để truyền dữ liệu.
Luôn ưu tiên sử dụng một ID ổn định và duy nhất từ dữ liệu của bạn làm key.
Tránh xa việc dùng index làm key trừ khi bạn biết chắc mình đang làm gì.
Hãy tận dụng sức mạnh của key để reset state component khi cần thiết.

Hiểu sâu về key chính là bạn đã nắm vững một trong những khái niệm quan trọng nhất để xây dựng những ứng dụng React hiệu năng, ổn định và không có những bug khó hiểu.

Chúc bạn coding vui vẻ với React!