Reusable Component Patterns
In this page:
Identifying Reuse Opportunities
When you notice the same JSX pattern appearing in multiple places with only small differences, that's a sign it should become a reusable component. Extracting it once and passing in the differences as props avoids duplicating the same markup everywhere.
Note: A good rule of thumb: if you copy-paste JSX more than twice, it's time to extract a component.
Warning: Extracting a component too early, before you actually have a second use case, can add unnecessary abstraction.
Example: Identifying Reuse Opportunities
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Badge({ label, color }) {
return <span style={{background: color, padding: "2px 8px", borderRadius: "4px"}}>{label}</span>;
}
function App() {
return (
<div>
<Badge label="New" color="lightgreen" />
<Badge label="Sale" color="orange" />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Parameterizing with Props
To make a component genuinely reusable, identify what varies between its use cases and turn those into props. This keeps the component's internal structure fixed and consistent while letting each usage customize exactly what it needs.
Note: Give props clear, descriptive names so it's obvious what each usage is customizing.
Warning: A component with too many unrelated props becomes hard to use correctly -- consider splitting it if that happens.
Example: Parameterizing with Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Alert({ message, type }) {
const colors = { error: "red", success: "green", info: "blue" };
return <div style={{color: colors[type], border: `1px solid ${colors[type]}`, padding: "8px"}}>{message}</div>;
}
function App() {
return (
<div>
<Alert message="Something went wrong" type="error" />
<Alert message="Saved successfully" type="success" />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Balancing Flexibility and Simplicity
A reusable component should be flexible enough to cover real variations, but not so configurable that it becomes confusing to use. A good sign of balance: most callers only need to pass one or two props, with the rest relying on sensible defaults.
Note: If a component starts needing five or more props to configure basic usage, consider whether it should be split into two more focused components instead.
Warning: Making every possible detail configurable via props can turn a simple component into one that's harder to use correctly than to just rewrite.
Example: Balancing Flexibility and Simplicity
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Tag({ text, color = "gray" }) {
return <span style={{background: color, color: "white", padding: "2px 6px", borderRadius: "3px"}}>{text}</span>;
}
function App() {
return <div><Tag text="Default" /><Tag text="Urgent" color="red" /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Hardcoding specific text or values inside a component instead of exposing them as props.
- Copy-pasting a component's JSX to make a slightly different version instead of parameterizing it.
- Making a component too rigid by not allowing any customization via props.
- Reusable components are designed to work in multiple places with different data.
- Props are the main tool for making a component configurable and reusable.
- Well-designed reusable components reduce code duplication across an app.
- A good reusable component balances flexibility with simplicity.
No browser-specific restrictions -- this is a component design practice, not a runtime feature.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: