Compound components: accessible Tabs with context
<TabsContext value> is the React 19 provider syntax (Topic 9.2). Keyboard support with arrow keys, which real tabs need, is built in Topic 18.4.
Compound components share state through context so related parts can be arranged freely, render props let a component hand data to a function you supply, and higher-order components wrap a component to add props; hooks replaced most render props and HOCs, but each pattern still has a place.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a compound Accordion with Accordion.Item, Accordion.Header and Accordion.Panel, where only one item is open at a time.
Write a withLogger(Component) HOC that logs rendering <Name> every time the wrapped component renders, and set its displayName.
Rewrite this render-prop component as a hook: <WindowWidth>{(w) => <p>{w}px</p>}</WindowWidth>.
Explain it without notes
What are compound components, and how do the parts share state?
What is a render prop? Give an example where it's still the best choice today.
What is a higher-order component, and what problems made hooks preferable?
For each pattern, name a situation where you would still choose it over a custom hook.
Preview
Console
Nothing logged yet.Expected console output
panel: Hi, I am Asha. I build React apps.
panel: No posts yet.
selected: false, true