React component có thể return gì ngoài JSX?

Component chỉ cần trả về một giá trị React biết cách render — không nhất thiết là JSX element. Từ React 16 trở đi, danh sách này rộng hơn nhiều người tưởng.

Các kiểu trả về hợp lệ:

function Banner({ show, count, items }) {
  if (!show) return null                      // không render gì
  if (count === 0) return 'Chưa có mục nào'   // text node thuần
  return items.map((i) => <Row key={i.id} {...i} />)  // mảng element
}

• null, undefined, false, true — React bỏ qua, không sinh node nào. Đây là cách chuẩn để một component tự ẩn mà không phá cấu trúc cây.
• Chuỗi và số — render thẳng thành text node. return 0 sẽ hiện chữ "0" trên màn hình, đây cũng là nguồn gốc của bug số 0 lạc chỗ khi dùng &&.
• Mảng hoặc Fragment — nhiều phần tử cùng cấp. Với mảng, mỗi phần tử cần key; Fragment thì không, trừ khi chính Fragment nằm trong vòng lặp.
• Portal — createPortal(children, domNode) render con vào một node DOM khác hẳn vị trí component trong cây. Modal và tooltip dùng cái này để thoát khỏi overflow: hidden của cha, nhưng vẫn giữ nguyên luồng props và event của React.

Điểm dễ nhầm với Portal: nó đổi chỗ trong DOM chứ không đổi chỗ trong cây React. Sự kiện vẫn bubble lên component cha theo cây React, không theo cây DOM.

Lưu ý: Trả về undefined từng là lỗi runtime ở các bản React cũ. React 18 chấp nhận nó như null, nhưng viết return null rõ ràng vẫn tốt hơn — người đọc thấy ngay đây là chủ ý chứ không phải quên return.