What is the Compound Component pattern?

Compound components work together, sharing state implicitly through context. The parent manages state; children access it without explicit prop passing.

const TabsContext = createContext(null);

function Tabs({ children, defaultTab }) {
  const [active, setActive] = useState(defaultTab);
  return (
    
      
{children}
    
  );
}

function TabList({ children }) {
  return 
{children}
;
}

function Tab({ id, children }) {
  const { active, setActive } = useContext(TabsContext);
  return (
     setActive(id)}
    >
      {children}
    
  );
}

function TabPanel({ id, children }) {
  const { active } = useContext(TabsContext);
  return active === id ? 
{children}
 : null;
}

// Usage — clean, flexible, no prop drilling

  
    Profile
    Settings