QReact · Interview preparation
What is the compound component pattern in React?
Compound components expose cooperating parts of a larger UI, such as Tabs.List and Tabs.Panel.
The idea to remember.
Compound components expose cooperating parts of a larger UI, such as Tabs.List and Tabs.Panel. They allow flexible composition while a shared parent or context coordinates behavior.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: pass content through children
01 / BEGINNERCompose a reusable panel without hardcoding its content.
function Panel({ title, children }) {
return <section><h2>{title}</h2>{children}</section>;
}Intermediate: share state with context
02 / INTERMEDIATEPut truly shared values in context, not every temporary input.
const ThemeContext = React.createContext('light');
function ThemeLabel() {
const theme = React.useContext(ThemeContext);
return <span>Theme: {theme}</span>;
}Real scenario: reducer for complex UI
03 / REAL SCENARIOGroup related updates in a reducer for a multi-step workflow.
function reducer(state, action) {
if (action.type === 'NEXT') return { ...state, step: state.step + 1 };
if (action.type === 'BACK') return { ...state, step: Math.max(0, state.step - 1) };
return state;
}
const [wizard, dispatch] = React.useReducer(reducer, { step: 0 });02Check your understanding
Try it in your own words.
Explain what is the compound component pattern in React without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗