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 Card component is nested inside App.
• The Button component is nested inside Card.
• children allow 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>
  );
}