Lesson 43 — Reusable Components in React

by

🧭 Introduction

One of the biggest strengths of React is component reusability.
If you repeat the same UI or logic again and again, your code becomes:

  • Hard to maintain
  • Bug-prone
  • Difficult to scale

Professional React developers focus on building reusable components that can be used across the entire application.

In this lesson, you will learn:

  • What reusable components are
  • Why reusability is important
  • How to design reusable components
  • Real-world reusable component examples
  • Best practices and common mistakes

❓ What is a Reusable Component?

A reusable component is:

A component designed to work in multiple places by accepting props instead of hardcoded values.

Example:

  • One Button component
  • Used in Login, Register, Dashboard, Forms

🧠 Why Reusable Components Matter?

Without reusability ❌

  • Duplicate code
  • Difficult updates
  • Inconsistent UI

With reusability ✅

  • Clean code
  • Easy updates
  • Consistent design
  • Faster development

🧩 Simple Example: Non-Reusable vs Reusable

❌ Non-Reusable Button

<button className="btn-primary">Submit</button>
<button className="btn-primary">Login</button>

✅ Reusable Button Component

const Button = ({ text }) => {
  return <button className="btn-primary">{text}</button>;
};

export default Button;

Usage:

<Button text="Submit" />
<Button text="Login" />

🧠 Props Are the Key to Reusability

Reusable components rely on props:

  • text
  • type
  • onClick
  • disabled
  • variant

🧩 Real-World Reusable Button Component

const Button = ({
  text,
  onClick,
  type = "button",
  disabled = false,
}) => {
  return (
    <button type={type} disabled={disabled} onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

Usage:

&lt;Button text="Save" onClick={handleSave} />
&lt;Button text="Delete" onClick={handleDelete} disabled />

🧩 Reusable Input Component Example

const Input = ({ label, type, value, onChange }) => {
  return (
    <div>
      <label>{label}</label>
      <input type={type} value={value} onChange={onChange} />
    </div>
  );
};

export default Input;

Usage:

<Input
  label="Email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

🧠 Making Components Flexible

Good reusable components:
✔ Accept props
✔ Avoid hardcoded logic
✔ Are UI-focused
✔ Are small and focused

🧩 Children Prop (Very Important)

The children prop makes components highly flexible.

const Card = ({ children }) => {
  return &lt;div className="card">{children}&lt;/div>;
};

export default Card;

Usage:

&lt;Card>
  &lt;h2>Title&lt;/h2>
  &lt;p>Description&lt;/p>
&lt;/Card>

🧩 Reusable Layout Components

Examples:

  • Header
  • Footer
  • Sidebar
  • Modal
  • Card

These components appear across multiple pages.

🧩 Reusable Modal Example

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div className="modal">
      <button onClick={onClose}>Close</button>
      {children}
    </div>
  );
};

export default Modal;

⚠ Common Mistakes

❌ Making components too specific
❌ Too many props
❌ Mixing business logic with UI
❌ Over-engineering small components

🎯 Best Practices for Reusable Components

✅ Keep components small
✅ Focus on UI, not business logic
✅ Use children wisely
✅ Use meaningful prop names
✅ Document component usage

❓ FAQs — Reusable Components in React

🔹 Should every component be reusable?

No. Only components used in multiple places.

🔹 Where should reusable components live?

Inside a components/common folder.

🔹 Can reusable components have state?

Yes, but keep state minimal and UI-related.

🔹 Are reusable components used in real projects?

Yes. They are core to professional React development.

🧠 Quick Recap

✔ Reusable components reduce duplication
✔ Props drive flexibility
✔ children enables composition
✔ Clean UI improves scalability

🎉 Conclusion

Reusable components are the foundation of clean React architecture. They make your application easier to maintain, faster to develop, and more consistent.

By mastering reusability, you are now coding like a professional React developer 🚀

👉 Next Lesson (SECTION 9):
Lesson 44 — Performance Optimization in React

Leave a Comment