Introduction

You know the basics now. Here we use Compound Components in real app situations — forms, pages, and data. Still plain language, just a bit more depth. Compound components are a set of components that work together — like , — sharing implicit state via Context inside the parent. They give flexible APIs: users compose pieces without dozens of optional props on one mega-component.

Hooks look strange at first. Every React developer felt that way. Use the same pattern from this lesson again and again until it feels normal.

When will you use this?

Reach for hooks whenever the screen must react to user input, time, or data from an API.

• Hooks power live search, dark mode toggles, and fetching data when a page opens.
• Almost every React job posting mentions hooks — this is core daily work.

Real-world: Practo tabbed patient record

Patient chart has tabs: Vitals, Prescriptions, Labs. Compound Tabs component lets clinic devs rearrange order without prop explosion on one mega-component.

Production-style code

const TabsContext = createContext(null);

function Tabs({ children, defaultIndex = 0 }) {
  const [active, setActive] = useState(defaultIndex);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}
Tabs.List = function TabList({ children }) { return <div role="tablist">{children}</div>; };
Tabs.Tab = function Tab({ index, children }) {
  const { active, setActive } = useContext(TabsContext);
  return (
    <button role="tab" aria-selected={active === index} onClick={() => setActive(index)}>
      {children}
    </button>
  );
};
Tabs.Panel = function Panel({ index, children }) {
  const { active } = useContext(TabsContext);
  return active === index ? <div role="tabpanel">{children}</div> : null;
};

What happens in production: Radix, Reach, and in-house design systems use compound components — flexible API familiar to senior React developers.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

function Tabs({ children }) {
  const [active, setActive] = useState(0);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
}
Tabs.List = TabList;
Tabs.Panel = TabPanel;

Line-by-line walkthrough

Code	What it means
function Tabs({ children }) {	Defines a function — often a component or event handler.
const [active, setActive] = useState(0);	Creates state: a value that can change, plus a function to update it.
return (	Sends UI or a value back to whoever called this function.
<TabsContext.Provider value={{ active, setActive }}>	JSX tag — a UI element or custom component on the page.
{children}	Part of the Compound Components example — read it together with the lines before and after.
</TabsContext.Provider>	Part of the Compound Components example — read it together with the lines before and after.
);	Closes a block started by { or ( above.
}	Closes a block started by { or ( above.
Tabs.List = TabList;	Part of the Compound Components example — read it together with the lines before and after.
Tabs.Panel = TabPanel;	Part of the Compound Components example — read it together with the lines before and after.

How it works (big picture)

• Parent holds active tab index.
• List and Panel read context.
• Public API feels like HTML: structure in JSX, logic hidden inside.

Do this on your computer

1. Study how native

and work together.