Có thể bạn đã nghe về React Fragment - một tính năng nhỏ nhưng nó giúp tối ưu cấu trúc của các component. Trong bài viết này, chúng ta sẽ khám phá cách React Fragment cung cấp một giải pháp đơn giản để tổ chức các phần tử mà không cần các thẻ <div> bao bọc không cần thiết, tăng cường khả năng đọc và bảo trì code.

React Fragment là một tính năng cho phép nhóm nhiều phần tử mà không cần thêm các wrapper DOM phụ. Rất hữu ích khi muốn trả về nhiều phần tử từ phương thức render của một component mà không cần các container phụ.

Từ React 16.2 hoặc các phiên bản cao hơn, bạn có thể sử dụng fragment để tránh việc thêm các wrapper phụ, cú pháp của Fragment như sau:

<React.Fragment> hoặc <> </> (cú pháp viết gọn).

Không có Fragment

Trước phiên bản React 16.2, chúng ta phải bọc các phần tử bằng một thẻ cha duy nhất.
Ví dụ:

import React from "react";

const MyComponent = () => {
  return (
     <div>
       <h1>Hello</h1>
       <p>World!</p>
     </div>
  );
};

export default MyComponent;

import React from "react";

const MyComponent = () => {
  return (
      <div>
        <h1>Hello</h1>
        <p>World!</p>
      </div>
      <div>
        <h1>Hello</h1>
        <p>World!</p>
      </div>
  );
};

export default MyComponent;

Bởi vì một component chỉ có thể trả về một phần tử duy nhất. Trong trường hợp này, chúng ta đang cố gắng trả về hai phần tử <div> ở cùng một cấp độ. Để sửa lỗi này, chúng ta có thể bọc hai phần tử <div> trong một phần tử <div> hoặc sử dụng <React.Fragment>.

Với Fragment (Shorthand)

Một Fragment chỉ đơn giản là một phần tử trống hoạt động như một vùng chứa cho các phần tử khác mà không hiển thị bất kỳ DOM nodes bổ sung nào.

import React from 'react';

const MyComponent = () => {
  return (
     <>
       <h1>Hello</h1>
       <p>World!</p>
     </>
  );
};

export default MyComponent;

Với Fragment (Key Prop)

Fragment có thể có một Key prop, giống như bất kỳ phần tử React nào khác. Các key prop rất hữu dụng khi chúng ta rendering một danh sách mà chúng ta không biết nên sử dụng thẻ nào để bọc thì sự lựa chọn tốt nhất là <React.Fragment>

import React from 'react';

const MyListComponent = ({ items }) => {
  return (
    <>
      {items.map((item) => (
        <React.Fragment key={item.id}>
           <span>{item.name}</span>
        </React.Fragment>
       ))}
    </>
  );
};

export default MyComponent;

Nếu không sử dụng Fragment

• DOM nodes bị dư thừa: Sử dụng một container thông thường sẽ làm tăng thêm các DOM nodes trong output đã render, có thể dẫn đến việc sử dụng bộ nhớ tăng lên và việc render chậm hơn.

• Xung đột CSS: Nếu các phần tử wrapper có các style hoặc CSS class riêng, chúng có thể ảnh hưởng đến layout hoặc style của các phần tử con bên trong component.

• Ảnh hưởng ngữ nghĩa: Đôi khi, việc thêm các phần tử bao bọc thừa có thể thay đổi cấu trúc ngữ nghĩa của tài liệu hoặc đoạn code, điều này có thể làm giảm khả năng tiếp cận.

• Độ sâu lồng nhau: Việc lồng các phần tử trong nhiều container có thể làm cho cây component sâu hơn, có thể ảnh hưởng đến hiệu suất và khả năng đọc.

React Fragment cung cấp một giải pháp cho việc cấu trúc các component trong ứng dụng React. Bằng cách loại bỏ nhu cầu về các phần tử bao bọc thừa, chúng đóng góp vào việc làm sạch code và quy trình phát triển hiệu quả hơn.