Tutorials › React Modern Development › Compound Components

Compound Components

7 min read

Compound Components share state via context between a parent and related children. The parent manages state and wraps children in a Provider. Children access state directly without prop drilling through layers.

Compound Component Pattern

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

Tabs.Tab = function({ index, label }) {
  const { active, setActive } = useContext(TabsContext);
  return ;
};

// Usage

← React DevTools Next: Render Props →

Quick Access

Compound Components

Compound Component Pattern