Compound Components pattern là gì?

Compound Components là một design pattern trong React cho phép nhiều component kết hợp cùng nhau để thực hiện một tác vụ hoặc tạo thành một UI duy nhất, trong đó chúng chia sẻ trạng thái (state) ngầm với nhau (thường thông qua React Context) mà không cần phải truyền props thủ công (props drilling).

Ví dụ điển hình:
Thẻ <select> và <option> trong HTML là nguồn cảm hứng lớn nhất. Trong React, nó thường trông như thế này:

<Select>
  <Select.Toggle />
  <Select.List>
    <Select.Option value="1">Lựa chọn 1</Select.Option>
    <Select.Option value="2">Lựa chọn 2</Select.Option>
  </Select.List>
</Select>

Ưu điểm:
- API Declarative & Linh hoạt: Người dùng (developer sử dụng component) có thể tự do sắp xếp, thay đổi thứ tự, hoặc lồng ghép các sub-components tùy ý mà chức năng vẫn hoạt động trơn tru.
- Đóng gói logic tốt: Mọi logic xử lý (đóng/mở dropdown, chọn mục hiện tại) đều được giấu kín bên trong component cha (<Select>), giúp UI bên ngoài trở nên rất sạch sẽ và dễ đọc.