Component Reusability in React
One of the biggest strengths of React is its ability to build reusable components.
Instead of writing the same UI code again and again, you can create components once and reuse them across your application — saving time, improving consistency, and making your code easier to maintain.
What Is Component Reusability?
Component reusability means creating modular, independent pieces of UI that can be used multiple times in different places.
A reusable component should:
- Be independent (not tightly coupled to other components)
- Accept props for customization
- Be composable (can include or nest other components)
- Focus on a single responsibility
Example – Simple Reusable Component
Let’s start with a basic reusable Button component:
- Reusable: The same button component is used twice with different props.
- Customizable: Props (
label,type,onClick) control how it behaves.
function Button({ label, onClick, type = "primary" }) {
const buttonStyle = {
backgroundColor: type === "primary" ? "#007bff" : "#6c757d",
color: "white",
padding: "10px 20px",
border: "none",
borderRadius: "5px",
cursor: "pointer",
};
return <button onClick={onClick} style={buttonStyle}>{label}</button>;
}
function App() {
return (
<div>
<Button label="Submit" onClick={() => alert("Submitted!")} />
<Button label="Cancel" onClick={() => alert("Cancelled!")} type="secondary" />
</div>
);
}
Nested Components (Composing Components)
React allows you to nest components inside one another, just like building blocks. This concept is called component composition.
Example – A Card component that uses nested reusable components:
- The
Cardcomponent is nested insideApp. - The
Buttoncomponent is nested insideCard. childrenallow flexibility for different inner content.
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div className="card-content">{children}</div>
</div>
);
}
function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
}
function App() {
return (
<Card title="Welcome to React">
<p>React components are reusable and composable!</p>
<Button label="Learn More" onClick={() => alert("You clicked Learn More!")} />
</Card>
);
}
Reusable Component Patterns
Here are some common patterns that make components reusable:
1. Props-Driven Reusability
Use props to change a component’s behavior or look.
<Button label="Save" type="success" />
<Button label="Delete" type="danger" />
2. Children Props for Flexible Layouts
The children prop lets you pass dynamic JSX to components.
<Card>
<h4>Title</h4>
<p>Custom content goes here.</p>
</Card>
3. Composition over Inheritance
React promotes composition (nesting components) instead of extending classes.
For example, combine multiple smaller components into a layout.
function Layout({ header, content, footer }) {
return (
<div>
<header>{header}</header>
<main>{content}</main>
<footer>{footer}</footer>
</div>
);
}
function App() {
return (
<Layoutheader={<h1>My Website</h1>}
content={<p>Welcome to my site!</p>}
footer={<small>© 2025 MySite</small>}
/>
);
}
Benefits of Reusable Components
| Benefit | Description |
|---|---|
| Consistency | Keeps UI elements uniform across the app. |
| Maintainability | Fix or update one component → changes everywhere. |
| Faster Development | Reuse existing components instead of rewriting. |
| Scalability | Makes large applications easier to grow and manage. |
| Less Code Duplication | Write once, use anywhere. |
Real-World Example: Reusable Input Field
function InputField({ label, type = "text", value, onChange, placeholder }) {
return (
<div className="form-group">
<label>{label}</label>
<inputtype={type}
value={value}
onChange={onChange}
placeholder={placeholder}
/>
</div>
);
}
function App() {
const [email, setEmail] = React.useState("");
return (
<form>
<InputFieldlabel="Email Address"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
/>
<Button label="Submit" onClick={() => alert(email)} />
</form>
);
}