Làm việc với Danh sách và Key trong React (React Roadmap)

Chào mừng trở lại với series React Roadmap! Trong hành trình xây dựng các giao diện người dùng hiện đại và hiệu quả với React, chúng ta đã cùng nhau khám phá những khái niệm cơ bản như Component (React Là Gì?), JSX (Hiểu về JSX), Props và State (React Props vs State), Conditional Rendering (Làm Chủ Conditional Rendering), và cách kết hợp các Component lại với nhau (Kết hợp Component). Hôm nay, chúng ta sẽ đi sâu vào một chủ đề cực kỳ phổ biến trong hầu hết các ứng dụng web: hiển thị danh sách dữ liệu.

Từ danh sách sản phẩm trên một trang thương mại điện tử, danh sách các mục trong menu điều hướng, cho đến danh sách bình luận dưới một bài viết – việc render (hiển thị) các tập dữ liệu theo dạng danh sách là công việc hàng ngày của một lập trình viên frontend. Trong React, việc này tưởng chừng đơn giản, nhưng ẩn chứa một khía cạnh quan trọng mà nếu không hiểu rõ, có thể dẫn đến các vấn đề về hiệu suất và tính đúng đắn của ứng dụng: đó chính là làm việc với Key.

Bài viết này sẽ hướng dẫn bạn cách render danh sách dữ liệu trong React một cách hiệu quả và chính xác, đồng thời làm sáng tỏ lý do tại sao Key lại quan trọng đến vậy và cách sử dụng Key đúng đắn.

Render Danh Sách Cơ Bản trong React

Trong JavaScript thuần, bạn thường lặp qua một mảng dữ liệu và tạo các phần tử HTML tương ứng. React cũng tương tự, nhưng thay vì thao tác trực tiếp với DOM, chúng ta sử dụng JSX để mô tả giao diện. Phương pháp phổ biến nhất để render danh sách trong React là sử dụng phương thức `map()` của mảng.

`map()` sẽ lặp qua từng phần tử trong mảng ban đầu và trả về một mảng mới chứa các phần tử JSX mà bạn muốn render. Dưới đây là một ví dụ đơn giản:

const numbers = [1, 2, 3, 4, 5];

function NumberList() {
  const listItems = numbers.map((number) =>
    <li>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

// Sử dụng Component
// <NumberList />

Đoạn code trên sẽ tạo ra một danh sách HTML không có thứ tự (<ul>) với 5 mục danh sách (<li>), mỗi mục hiển thị một số từ mảng `numbers`. Cách tiếp cận này rất trực quan và dễ hiểu.

Tuy nhiên, nếu bạn thử chạy đoạn code này trong môi trường phát triển của React, bạn sẽ nhận được một cảnh báo trong console:

Warning: Each child in a list should have a unique "key" prop.

Cảnh báo này cho thấy chúng ta đang thiếu một thứ quan trọng: Key.

Vì Sao React Cần Key? Hiểu về Reconciliation

Để hiểu tại sao Key lại cần thiết, chúng ta cần nhìn lại cách React cập nhật giao diện. React sử dụng một thuật toán gọi là Reconciliation (Đối chiếu). Khi State hoặc Props của một Component thay đổi, React sẽ tạo ra một cây phần tử React (React Element Tree) mới và so sánh nó với cây phần tử trước đó. Quá trình so sánh này diễn ra trên một “DOM ảo” (Virtual DOM).

Mục tiêu của Reconciliation là xác định những phần tử DOM thực tế nào cần được thay đổi để đồng bộ với cây phần tử React mới. Bằng cách này, React giảm thiểu tối đa số lượng thao tác trực tiếp lên DOM thật, vì thao tác DOM là tốn kém về mặt hiệu suất.

Khi React gặp một danh sách các phần tử (như danh sách các thẻ <li> được tạo ra từ `map`), nó cần một cách hiệu quả để biết phần tử nào trong danh sách cũ tương ứng với phần tử nào trong danh sách mới. Điều gì xảy ra nếu bạn thêm một mục mới vào đầu danh sách? Hoặc xóa một mục ở giữa? Hoặc sắp xếp lại danh sách?

Nếu không có Key, React không có thông tin gì để phân biệt các phần tử trong danh sách. Nó sẽ cố gắng đối chiếu các phần tử dựa trên vị trí của chúng trong mảng (index). Điều này dẫn đến vấn đề:

  • Hiệu suất kém: Thay vì chỉ thêm/xóa/di chuyển các phần tử DOM thực tế, React có thể kết thúc bằng cách “cập nhật” nội dung của các phần tử hiện có tại các vị trí mới, dẫn đến việc re-render không cần thiết hoặc không hiệu quả.
  • Lỗi hiển thị hoặc State không đúng: Nếu danh sách chứa các Component con có State riêng (ví dụ: một danh sách các input field hoặc checkbox), việc sử dụng index làm cách đối chiếu có thể khiến State của các Component con bị gắn nhầm với dữ liệu sai khi thứ tự danh sách thay đổi. Ví dụ: bạn check vào checkbox của mục “B”, sau đó mục “A” được thêm vào đầu danh sách. Nếu dùng index làm key, checkbox bạn vừa check có thể bị hiểu là thuộc về mục “A” mới thay vì mục “B” cũ (nay ở vị trí khác).

Key Xuất Hiện để Giải Cứu

Đây là lúc thuộc tính đặc biệt `key` phát huy tác dụng. Key là một chuỗi hoặc số duy nhất mà bạn cần thêm vào các phần tử khi render danh sách.

const numbers = [1, 2, 3, 4, 5];

function NumberList() {
  const listItems = numbers.map((number) =>
    // Thêm thuộc tính 'key' vào phần tử cấp cao nhất trong map()
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Trong ví dụ trên, chúng ta đã thêm `key={number.toString()}` vào thẻ `<li>`. Bây giờ, mỗi mục danh sách có một “nhận dạng” ổn định.

Khi danh sách thay đổi, React sử dụng các Key này để đối chiếu các phần tử trong danh sách cũ với các phần tử trong danh sách mới. Nếu một Key đã tồn tại trong danh sách cũ và vẫn xuất hiện trong danh sách mới, React biết rằng đó là cùng một phần tử, và nó có thể tái sử dụng (hoặc chỉ cập nhật nhẹ) phần tử DOM tương ứng. Nếu một Key mới xuất hiện, React tạo phần tử DOM mới. Nếu một Key cũ không còn trong danh sách mới, React sẽ hủy (unmount) phần tử DOM tương ứng.

Nhờ Key, React có thể xác định chính xác những thay đổi (thêm mới, xóa, sắp xếp lại) và thực hiện các cập nhật DOM hiệu quả nhất, đảm bảo hiệu suất tốt và tính đúng đắn khi làm việc với các danh sách động và các Component con có State.

Key “Tốt” là Key Như Thế Nào?

Một Key tốt cần đáp ứng hai tiêu chí quan trọng:

  1. Duy nhất trong danh sách đó: Key của mỗi phần tử trong cùng một danh sách anh em (sibling) phải là duy nhất. Nó không cần phải duy nhất trên toàn bộ ứng dụng, chỉ cần duy nhất so với các phần tử ngang hàng với nó.
  2. Ổn định (Stable): Key của một phần tử dữ liệu cụ thể không được thay đổi giữa các lần render. Nếu cùng một mục dữ liệu xuất hiện ở các lần render khác nhau, Key của nó phải giống nhau.

Nguồn tốt nhất để lấy Key chính là dữ liệu mà bạn đang hiển thị. Hầu hết các dữ liệu từ backend (như từ API) đều có một trường ID duy nhất (ví dụ: `id`, `_id`, `uuid`). Đây chính là ứng viên hoàn hảo cho Key.

const products = [
  { id: 1, name: 'Laptop Gaming', price: 1200 },
  { id: 2, name: 'Điện thoại thông minh', price: 800 },
  { id: 3, name: 'Bàn phím cơ', price: 150 }
];

function ProductList({ products }) {
  const listItems = products.map((product) =>
    <li key={product.id}>
      {product.name} - ${product.price}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Trong ví dụ này, `product.id` là một Key lý tưởng vì nó duy nhất cho mỗi sản phẩm và sẽ không thay đổi khi danh sách sản phẩm được hiển thị lại.

Key “Xấu” là Key Như Thế Nào? Cẩn Thận Với Index của Mảng!

Đây là điểm mà nhiều lập trình viên mới học React dễ mắc sai lầm: sử dụng index của mảng làm Key.

const numbers = [1, 2, 3, 4, 5];

function NumberListBadKey() {
  const listItems = numbers.map((number, index) =>
    // Sử dụng index làm Key - CẢNH BÁO!
    <li key={index}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Mặc dù việc này sẽ loại bỏ cảnh báo “missing key” trong console, nhưng nó chỉ chấp nhận được trong những trường hợp rất hạn chế:

  1. Danh sách hoàn toàn tĩnh, không bao giờ thay đổi.
  2. Danh sách không bao giờ bị thêm/xóa các mục.
  3. Danh sách không bao giờ bị sắp xếp lại.
  4. Các phần tử trong danh sách không có State riêng và không chứa các Component con có State riêng.

Trong hầu hết các ứng dụng thực tế, dữ liệu thường xuyên thay đổi (thêm bình luận, xóa sản phẩm khỏi giỏ hàng, sắp xếp lại danh sách theo giá…). Khi đó, sử dụng index làm Key sẽ phá vỡ khả năng nhận dạng ổn định của React. Index của một mục sẽ thay đổi nếu có mục khác được thêm vào trước nó hoặc bị xóa đi.

Ví dụ, xét danh sách `[A, B, C]` với keys là `[0, 1, 2]`. Nếu bạn xóa mục `B`, danh sách mới là `[A, C]` với keys là `[0, 1]`. React thấy: mục có key `0` vẫn là `A` (đúng); mục có key `1` đã thay đổi từ `B` sang `C`. React có thể hiểu sai và chỉ “cập nhật” phần tử DOM của `B` thành `C`, thay vì xóa `B` và di chuyển `C` lên vị trí của `B`. Điều này đặc biệt tai hại nếu `B` hoặc `C` là một Component phức tạp có State riêng (ví dụ: input field, checkbox) hoặc hiệu ứng động.

Lời khuyên: Luôn cố gắng tránh sử dụng index của mảng làm Key, trừ khi bạn chắc chắn 100% rằng danh sách đáp ứng tất cả các điều kiện trên. Trong mọi trường hợp khác, hãy tìm một ID duy nhất và ổn định từ dữ liệu gốc.

Sử Dụng Key Khi Render Danh Sách Components

Nguyên tắc về Key vẫn áp dụng khi bạn render một danh sách các React Component tùy chỉnh.

function UserItem({ user }) {
  // Đây là một Component con
  return <li>{user.name} ({user.email})</li>;
}

function UserList({ users }) {
  const listItems = users.map((user) =>
    // Key được đặt trên phần tử cấp cao nhất trả về trong map()
    <UserItem key={user.id} user={user} />
  );
  return (
    <ul>{listItems}</ul>
  );
}

Trong ví dụ này, chúng ta đặt `key={user.id}` trên Component `<UserItem />` khi tạo danh sách bằng `map()`. React sẽ sử dụng Key này để quản lý các instance của `UserItem` trong quá trình Reconciliation.

Một điều quan trọng cần lưu ý là thuộc tính `key` là đặc biệt đối với React và không được truyền xuống Component con như một Prop thông thường. Nếu Component con (`UserItem`) cần truy cập ID của người dùng (ví dụ: để fetch thêm dữ liệu hoặc xử lý sự kiện), bạn cần truyền ID đó xuống dưới dạng một Prop riêng biệt, ví dụ: ``.

Key vs. Props: Phân biệt

Như đã đề cập, `key` là một prop đặc biệt được React sử dụng nội bộ để quản lý các phần tử trong danh sách. Nó không phải là một prop thông thường mà Component con có thể truy cập thông qua `this.props.key` (trong class components) hoặc `props.key` (trong functional components).

Nếu bạn cần truyền ID của mục dữ liệu xuống Component con, hãy truyền nó bằng một tên prop khác:

function Item({ id, name }) {
  // Component này nhận 'id' và 'name' qua props
  return <li data-item-id={id}>{name}</li>;
}

function MyList({ items }) {
  return (
    <ul>
      {items.map(item => (
        // 'key' dùng cho React Reconciliation
        // 'id' và 'name' là props truyền xuống Component con
        <Item key={item.id} id={item.id} name={item.name} />
      ))}
    </ul>
  );
}

Tổng Kết: Key Tốt vs. Key Xấu (Index)

Hãy cùng tóm tắt lại những điểm khác biệt chính giữa việc sử dụng ID duy nhất và sử dụng index của mảng làm Key:

Đặc điểm Key là ID duy nhất (ví dụ: item.id) Key là Index của mảng (index)
Nhận dạng phần tử Ổn định, dựa trên dữ liệu thực tế, giúp React nhận biết chính xác từng mục. Thay đổi khi mảng thay đổi (thêm/xóa/sắp xếp lại), khiến React khó nhận dạng mục cụ thể.
Hiệu suất cập nhật Rất tốt, React xác định chính xác phần tử đã thay đổi/thêm/xóa/di chuyển, thực hiện cập nhật DOM tối ưu. Kém, React có thể re-render hoặc cập nhật sai phần tử khi danh sách thay đổi, dẫn đến thao tác DOM không hiệu quả.
Tính đúng đắn (Stateful Components) Giữ đúng state (trạng thái nội bộ) cho từng phần tử dữ liệu, ngay cả khi vị trí của chúng thay đổi. Có thể gây lỗi state (ví dụ: input value, checkbox checked state) khi danh sách thay đổi thứ tự hoặc bị chỉnh sửa.
Sử dụng phổ biến Luôn luôn được khuyến khích cho danh sách động, dữ liệu có thể thay đổi. Chỉ chấp nhận được cho danh sách tĩnh, không bao giờ thay đổi về thứ tự hoặc số lượng phần tử. Nên tránh dùng nếu có thể.

Các Lỗi Thường Gặp và Cách Khắc Phục

  • Quên thêm Key: Lỗi này phổ biến nhất và React sẽ cảnh báo bạn trong console. Luôn kiểm tra console khi làm việc với danh sách.
  • Key không duy nhất: Nếu hai phần tử trong cùng một danh sách có cùng Key, React không thể phân biệt chúng và hành vi có thể khó đoán. Đảm bảo nguồn ID của bạn là duy nhất cho mỗi mục dữ liệu.
  • Sử dụng các giá trị không ổn định làm Key: Ví dụ: dùng `Math.random()` hoặc timestamp hiện tại. Mỗi lần render, Key sẽ khác nhau, khiến React không thể đối chiếu các mục cũ với mới và sẽ re-render toàn bộ danh sách, làm mất đi lợi ích về hiệu suất của Key.
  • Lạm dụng Index Key: Như đã phân tích, sử dụng index làm Key cho danh sách động là một nguồn gốc tiềm ẩn của lỗi và vấn đề hiệu suất. Hãy ưu tiên tìm ID duy nhất từ dữ liệu. Nếu bạn phải tạo danh sách tạm thời ở frontend mà không có ID, cân nhắc sử dụng thư viện tạo UUID (Universally Unique Identifier) để gán ID tạm thời cho các mục mới.

Kết Nối với React Roadmap

Việc hiểu và sử dụng Key đúng đắn là một kỹ năng nền tảng không thể thiếu khi phát triển ứng dụng React thực tế. Nó trực tiếp ảnh hưởng đến:

  • Hiệu suất ứng dụng: Key giúp React cập nhật DOM hiệu quả hơn, đặc biệt quan trọng với các danh sách lớn hoặc thường xuyên thay đổi.
  • Độ tin cậy của giao diện: Đảm bảo rằng giao diện hiển thị đúng dữ liệu và trạng thái của các Component con được duy trì chính xác khi danh sách thay đổi.

Khái niệm về Reconciliation và việc sử dụng Key liên quan chặt chẽ đến cách React quản lý vòng đời và cập nhật các Component. Nếu bạn chưa đọc bài về Vòng Đời Component trong React, đây là thời điểm tốt để xem lại, giúp bạn có cái nhìn sâu sắc hơn về cách React hoạt động bên trong.

Key cũng là một yếu tố cần xem xét khi bạn Kết hợp các Component để xây dựng các item phức tạp trong danh sách của mình.

Lời Kết

Làm việc với danh sách là một phần không thể thiếu khi xây dựng ứng dụng React. Bằng cách nắm vững cách sử dụng Key đúng đắn – luôn ưu tiên Key duy nhất và ổn định từ dữ liệu gốc – bạn không chỉ loại bỏ các cảnh báo khó chịu trong console mà còn đảm bảo ứng dụng của mình hoạt động hiệu quả, mượt mà và không gặp phải các lỗi liên quan đến việc cập nhật giao diện động.

Hãy coi Key như “chứng minh thư” của từng mục dữ liệu trong danh sách của bạn. Cung cấp đúng “chứng minh thư” giúp React dễ dàng theo dõi và quản lý chúng một cách hiệu quả nhất. Đây là một bước tiến quan trọng trên con đường làm chủ React của bạn.

Trong bài viết tiếp theo của series React Roadmap, chúng ta sẽ chuyển sang một chủ đề cũng rất quan trọng: Xử lý sự kiện trong React. Hẹn gặp lại!

Recent News Articles

Fresh job related news content posted each day.

Mục lục

→ Chỉ mục