📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
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