Sự quan trọng của keys trong ReactJS

keys trong React rất quan trọng khi render các mảng dữ liệu. Trong bài viết này, chúng ta cùng tìm hiểu về keys trong React nhé.

Keys trong React

keys giúp React xác định xem những component nào đã được thay đổi, được thêm, hay bị xóa. React sẽ update lại các thay đổi này và hiển thị trên UI. Key trong react các bạn có thể hiểu chúng dùng để định danh cho mỗi element trong mảng. Chúng ta cùng xem một ví dụ về sử dụng key và mình sẽ giải thích tại sao React cần keys nhé ^^.

Đầu tiên, chúng ta thử tạo một list các course và không gắn key cho các element như sau:

const courseItems = courses.map((course) =>
  <li>{course.name}</li>
);

Kết quả mình ví dụ như sau:

<li>Khoá học Javascript</li>
<li>Khóa học HTML</li>

Chúng ta sẽ thêm một khóa học vào trong courses, kết quả sẽ thế này:

<li>Khoá học Javascript</li> // cũ
<li>Khóa học HTML</li> // cũ
<li>Khóa học CSS</li> // thêm mới

React sẽ thực hiện so sánh ở lần render trước đó(2 khóa học) với lần render tiếp theo(3 khóa học), nó sẽ nhận ra phần tử đầu tiên và phần tử thứ 2 ở cả 2 lần render là giống nhau, và phần tử <li> thứ 3 được thêm mới, vì thế nó sẽ hiển thị trên UI cho chúng ta phần tử <li>3. Khóa học CSS</li>, 2 phần tử thứ nhất và thứ 2 sẽ không cần update 👍.

Nhìn thì thấy khá là ok đấy chứ 😁 Bây giờ ta thử thêm một khóa học vào trước phần tử đầu tiên xem điều gì sẽ xảy ra nhé:

// tree cũ                                                    
<li>Khoá học Javascript</li>          
<li>Khóa học HTML</li>

// tree mới   
<li>Khóa học CSS</li>
<li>Khoá học Javascript</li>
<li>Khóa học HTML</li>

Cùng tiếp tục quá trình so sánh của React:

React sẽ so sánh lần lượt element đầu tiên của lần render trước đó, với element đầu tiên của lần render tiếp theo, và tương tự cho các phần tử kế tiếp. Nếu nhận thấy có điểm khác nó sẽ update lên UI.

• <li>Khoá học Javascript</li> vs <li>Khóa học CSS</li>, React nhận thấy chúng khác nhau, do đó nó sẽ cập nhật element mới này và hiển thị trên UI.
• <li>Khóa học HTML</li> vs <li>Khoá học Javascript</li> khác nhau => update.

Nếu tiếp tục quá trình trên thì tất cả các element sẽ bị update 🤦‍♂️. Vì chúng đã bị thay đổi thứ tự so với lần render trước đó. React sẽ không thể biết được element nào thay đổi, element nào giữ nguyên. Và key ra đời vì lý do này. Bây giờ nếu chúng ta thêm các key cho element thì sẽ như sau:

const courseItems = courses.map((course, index) =>
  <li key={index}>
    {course.name}
  </li>
);

Như ở ví dụ trên mình đã sử dụng key là index. Kết quả sẽ nhìn như sau:

<li key={0}>Khoá học Javascript</li>
<li key={1}>Khóa học HTML</li>

Giả sử mình sửa khóa học HTML thành khóa học HTML/CSS và thay đổi thứ tự element thì lúc này, dựa vào key, React sẽ biết được element nào đã thay đổi:

<li key={1}>Khóa học HTML/CSS</li>
<li key={0}>Khoá học Javascript</li>

Các key là unique giữa các siblings, các bạn có thể hiểu siblings là các element có cùng parent gần nó nhất.

React sẽ phát hiện ra element <li key={1}>Khóa học HTML/CSS</li> thay đổi nội dung và update nó trên UI, các element khác không thay đổi nội dung mà chỉ thay đổi thứ tự của chúng.

Khi sử dụng key là index, sẽ xảy ra một vấn đề đó là nếu ta thêm, xóa phần tử thì key của các element sẽ bị thay đổi do index lúc này thay đổi. Điều này sẽ dẫn đến việc các element không thay đổi nội dung sẽ bị update lại. Đây là một lưu ý khi sử dụng index làm key các bạn cần nắm.

Một ví dụ cho lưu ý trên:

<div key="1">Trang</div>   |  <div key="1">Minh</div>
<div key="2">Hà</div>      |  <div key="2">Trang</div>
                           |  <div key="3">Hà</div>

React sẽ dựa vào key của các element này so sánh và quyết định xem element nào sẽ update. Lúc này các update UI sẽ như sau:

• Thay đổi element với key="1" từ Trang thành Minh.
• Thay đổi element với key="2" từ Hà thành Trang.
• Thêm element với key="3".

Lúc này, React sẽ update 3 element thay vì đơn giản là 1 element.

Để giải quyết vấn đề này chúng ta có thể sử dụng một unique id để làm key cho mỗi element, các bạn có thể sử dụng nanoid ^^. Với cách làm này khi bạn thay đổi vị trí element hay update element thì dựa vào key, React sẽ biết element nào nên update ^^.

Vậy bất cứ khi nào sử dụng key ta đều phải cần generate id hay sao? Theo mình nghĩ thì điều này cũng không hoàn toàn cần thiết khi items của chúng ta đáp ứng các điều kiện sau:

• Mảng các item không thay đổi(Không thêm item, xóa item,...)
• Các item không thay đổi thứ tự và các item không có id.

Khi items đáp ứng các điều kiện trên thì chúng ta có thể sử dụng index để làm key.

Kết luận

Như vậy là chúng ta đã tìm hiểu xong về keys trong React. Hy vọng bài viết sẽ giúp ích cho các bạn ^^.

Chúc các bạn học tốt.