Just as in Chapter 7, a component should ideally do one thing well. A UserProfile component that fetches data, formats it, AND handles complex layout logic all at once is harder to reuse, test, and reason about than three smaller components each handling one of those concerns.
function Button({ variant = "primary", children, ...props }) {
const styles = {
primary: "btn-primary",
secondary: "btn-secondary",
danger: "btn-danger"
};
return (
<button className={styles[variant]} {...props}>
{children}
</button>
);
}
<Button variant="danger" onClick={handleDelete}>Delete</Button>...props Spread:Spreading any remaining props (like onClick) directly onto the underlying <button> lets the component stay flexible — callers can pass any standard button attribute without the component needing to explicitly list every single one.
function Tabs({ children }) {
const [activeIndex, setActiveIndex] = useState(0);
return (
<div>
{React.Children.map(children, (child, index) =>
React.cloneElement(child, { isActive: index === activeIndex, onClick: () => setActiveIndex(index) })
)}
</div>
);
}
<Tabs>
<Tab>Profile</Tab>
<Tab>Settings</Tab>
</Tabs>This is an advanced pattern: a set of components (Tabs and Tab) designed to work together, sharing implicit state, while the API for using them stays clean and declarative. You'll encounter this pattern in many popular component libraries.
A component hardcoded with specific text, colors, or business logic isn't truly reusable, even if it's used in two places by copy-pasting and tweaking. Genuine reusability comes from designing clear props (like the variant prop above) that let the same component adapt to different contexts without modification.
Build a reusable Card component that accepts a title, an optional icon, and children content, used at least twice with different content.
function Card({ title, icon, children }) {
return (
<div className="card">
<h3>{icon} {title}</h3>
<div>{children}</div>
</div>
);
}
function App() {
return (
<>
<Card title="Profile" icon="👤">
<p>User details here.</p>
</Card>
<Card title="Settings" icon="⚙️">
<p>App settings here.</p>
</Card>
</>
);
}Q What does '...props' actually do in JavaScript?
It's the spread operator applied to an object — it copies all the remaining key-value pairs from the props object that weren't already destructured, letting you forward them onto an underlying element or component.
Q Is the compound component pattern something beginners need to master right away?
No — it's an advanced pattern worth recognizing when you see it in libraries, but you can build fully functional, well-designed apps for a long time using just plain props and composition, as shown in most of this course.