Compound component pattern. Tại sao hữu ích? Implement example?

Compound component là pattern trong đó component cha quản lý state nội bộ và chia sẻ cho các component con thông qua Context, tạo nên một nhóm component hoạt động cùng nhau.

Ví dụ: <Tabs> là cha quản lý tab đang active, <Tab> và <TabPanel> là con truy cập state qua context để hiển thị đúng nội dung. Lợi ích lớn nhất là API linh hoạt — người dùng component có thể sắp xếp, thêm bớt component con tùy ý mà không cần truyền hàng loạt props phức tạp (tránh prop explosion). Pattern này phổ biến trong các thư viện UI như Radix UI, Headless UI, dùng kết hợp React.cloneElement hoặc Context.

The compound component pattern has a parent component manage internal state and share it with child components through Context, forming a group of components that work together.

Example: <Tabs> manages the active tab; <Tab> and <TabPanel> access that state via context to display the correct content. The biggest benefit is a flexible API — consumers can arrange, add, or remove child components freely without passing a long list of complex props (avoiding prop explosion). This pattern is popular in UI libraries like Radix UI and Headless UI, implemented with Context or React.cloneElement.