React Fragment là gì và khi nào nên sử dụng?

Fragment cho phép một component trả về nhiều phần tử cùng cấp mà không thêm thẻ bọc nào vào DOM. Viết đầy đủ là <React.Fragment>, viết tắt là <>...</>.

// Không có Fragment: bọc div — <div> giữa <tr> và <td> là HTML sai, React cảnh báo lỗi hydration
function Row() {
  return (
    <div>
      <td>Tên</td>
      <td>Tuổi</td>
    </div>
  )
}

// Có Fragment: DOM đúng như thiết kế
function Row() {
  return (
    <>
      <td>Tên</td>
      <td>Tuổi</td>
    </>
  )
}

Hai chỗ Fragment không chỉ là dọn dẹp mà là bắt buộc:

• HTML có ràng buộc cha–con. <table> không nhận <div> chen giữa nó và <tr>, <ul> chỉ nhận <li>. Nhét <div> vào giữa tạo ra HTML không hợp lệ và trình duyệt sẽ tự sửa theo cách bạn không lường được.
• CSS layout đếm con trực tiếp. Trong Flexbox hay Grid, mỗi con trực tiếp là một item. Một <div> thừa gom mấy phần tử thành một item duy nhất, làm hỏng bố cục.

Khi lặp qua mảng để sinh danh sách Fragment, phải dùng cú pháp đầy đủ vì key là prop, mà cú pháp rút gọn <> không nhận prop nào:

{rows.map((r) => (
  <React.Fragment key={r.id}>
    <dt>{r.term}</dt>
    <dd>{r.desc}</dd>
  </React.Fragment>
))}

Lưu ý: Fragment không render ra gì nên không gắn được className, style hay ref.

Cần một trong ba thứ đó thì bạn đang cần thẻ thật, không phải Fragment.