React fragment vs empty tag - khác nhau giữa <React.Fragment> vs <>

Trong React, để return về một list các phần tử con (children), chúng ta cần sử dụng một thẻ để chứa các phần tử này. Mình lấy một ví dụ:

// ...

const Blog = () => (
    <div>
        <li>Homiedev.com</li>
        <li>Học JavaScript cơ bản</li>
    </div>
);

// ...

Trên DOM lúc này sẽ có kết quả:

<div>
  <li>Homiedev.com</li>
  <li>Học JavaScript cơ bản</li>
</div>

Ở đoạn code trên, React sẽ thêm thẻ <div> vào DOM. Tuy nhiên nếu các bạn muốn 1 thẻ mà nó không được render trong DOM và có thể chứa các children, chúng ta có thể sử dụng Fragment của React.

// ...

const Blog = () => (
    <React.Fragment>
        <li>Homiedev.com</li>
        <li>Học JavaScript cơ bản</li>
    </React.Fragment>
);

// ...

Trên DOM, khi sử dụng Fragment sẽ có kết quả:

<li>Homiedev.com</li>
<li>Học JavaScript cơ bản</li>

Đây chính là chức năng của Fragment, nó giúp chúng ta giảm bớt việc tạo ra các elements trong DOM, rendering time sẽ nhanh hơn việc sử dụng một thẻ như div để chứa children.

Đoạn code trên, chúng ta có thể sử dụng Fragment bằng cú pháp ngắn gọn hơn bằng cách dùng empty tag <>.

// ...

const Blog = () => (
    <>
        <li>Homiedev.com</li>
        <li>Học JavaScript cơ bản</li>
    </>
);

// ...

Tuy nhiên, trong trường hợp yêu cầu sử dụng key khi render một mảng các fragment thì chúng ta phải sử dụng Fragment thay vì empty tag <>. Vì <> không hỗ trợ chúng ta truyền key vào. Đó chính là điểm khác nhau giữa Fragment và empty tag <> 😁.

function Users(props) {
  return (
    <div>
      {props.items.map(item => (
        // Nếu không truyền `key`, React sẽ hiện key warning ⚠
        <React.Fragment key={item.id}>
          <p>{item.username}</p>
          <span>{item.email}</span>
        </React.Fragment>
      ))}
    </div>
  );
}

Việc tại sao lại sử dụng key trong React, các bạn có thể đọc bài viết: Sự quan trọng của keys trong ReactJS.

Như vậy là chúng ta đã tìm hiểu xong sự khác nhau giữa React fragment vs empty tag và lợi ích khi sử dụng fragment đó là rendering time được cải thiện. Hi vọng bài viết giúp ích cho các bạn.

Chúc các bạn học tốt. Hãy thường xuyên ghé thăm blog Homiedev để theo dõi các bài viết về Front-end nhé 😁🎉.