React Tutorial 0/120 lessons ~6 min read Lesson 20“Modern frontend engineering”

Component Reusability

Component reusability in React: build once, reuse many times with props, children, and composition while avoiding over-engineering.

Course progress0%

Focus

47 guided sections

Practice signal

Examples included

Career prep

Interview Q&A included

Component Reusability

Component reusability is one of the biggest advantages of React.

Build a component once, then use it multiple times with different props, content, or behavior.

Instead of writing the same UI repeatedly, create reusable components and customize through props.

Learning Objectives

By the end of this lesson, you will understand:

What component reusability means
Why reusable components matter
How to identify reusable UI
How to create reusable components
How props customize behavior and data
How children enables composition
Reusable buttons, cards, inputs, and layouts
How to avoid over-engineering
How to design component APIs
Common mistakes and practical fixes

1. What Is Component Reusability?

Suppose you need three buttons:

text

Save
Cancel
Delete

A beginner might create three separate components with duplicate structure.

tsx

function SaveButton() { return <button>Save</button>; }
function CancelButton() { return <button>Cancel</button>; }
function DeleteButton() { return <button>Delete</button>; }

Reusable approach:

tsx

function Button({ children }: { children: React.ReactNode }) {
  return <button>{children}</button>;
}

tsx

<Button>Save</Button>
<Button>Cancel</Button>
<Button>Delete</Button>

One component. Many uses.

2. Why Reusability Matters

Less duplication: common UI logic is written once.
Easier maintenance: one update benefits all usages.
Consistency: shared structure and behavior across pages.
Faster development: assemble pages from existing blocks.
Better organization: large apps become smaller composable units.

3. Think in UI Building Blocks

text

Application
│
├── Navbar
├── Sidebar
├── PageHeader
├── SearchBox
├── ProductCard
├── Button
└── Footer

Each block can potentially be reused across multiple pages and workflows.

4. The Basic Pattern

tsx

function Component(props: { value: string }) {
  return <div>{props.value}</div>;
}

<Component value="Hello" />

The component holds common structure. Props hold differences.

5. Example: Reusable Product Card

tsx

function ProductCard({ name, price, image }: { name: string; price: number; image: string }) {
  return (
    <article>
      <img src={image} alt={name} />
      <h2>{name}</h2>
      <p>INR {price}</p>
    </article>
  );
}

tsx

<ProductCard name="Banarasi Silk Saree" price={4999} image="/saree1.jpg" />
<ProductCard name="Kanchipuram Silk Saree" price={6999} image="/saree2.jpg" />
<ProductCard name="Designer Saree" price={3999} image="/saree3.jpg" />

6. Props Make Reusability Possible

Without props, a component is tied to hardcoded content. With props, it becomes reusable.

7. Component Reuse Through children

tsx

function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}

tsx

<Card><h2>Profile</h2><p>Welcome back!</p></Card>
<Card><h2>Orders</h2><p>You have 5 orders.</p></Card>

8. Reusable Button

tsx

function Button({
  children,
  variant = "primary",
  onClick,
}: {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "danger";
  onClick?: () => void;
}) {
  return (
    <button className={`button ${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}

9. Reusable Input

tsx

function Input({
  type = "text",
  placeholder,
  value,
  onChange,
}: {
  type?: string;
  placeholder: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) {
  return <input type={type} placeholder={placeholder} value={value} onChange={onChange} />;
}

10. Reusable Avatar

tsx

function Avatar({ src, name, size = 50 }: { src: string; name: string; size?: number }) {
  return <img src={src} alt={name} width={size} height={size} />;
}

11. Reusable Alert

tsx

function Alert({ type, children }: { type: "success" | "error" | "warning"; children: React.ReactNode }) {
  return <div className={`alert ${type}`}>{children}</div>;
}

tsx

function Navbar({ logo, children }: { logo: string; children: React.ReactNode }) {
  return (
    <nav>
      <img src={logo} alt="Logo" />
      <div>{children}</div>
    </nav>
  );
}

13. Reusable Layout Components

tsx

function PageLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="page-layout">
      <Navbar logo="/logo.png"><a href="/">Home</a></Navbar>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
}

14. Component Composition

text

ProductPage
│
├── Navbar
├── ProductGallery
├── ProductInfo
│   ├── Price
│   ├── Rating
│   └── Button
└── Footer

Composition helps you build large UI from focused smaller components.

15. Reusability Through Composition

tsx

<Card><ProductInfo /></Card>
<Card><UserProfile /></Card>
<Card><OrderSummary /></Card>

16. Clear Responsibilities

Good reusable components have focused responsibilities: Button, Input, Avatar, Card, Modal.

Avoid one giant everything component that owns unrelated concerns.

17. Do Not Extract Everything

Not every repeated JSX fragment needs extraction. Extract when clarity, reuse, or composition improves.

18. Avoid Premature Abstraction

Start simple. Extract after patterns become clear and repeated in meaningful ways.

19. The Rule of Repetition

If the same structure appears many times, ask: Can this become a reusable component?

20. Reuse Data, Not Just Markup

tsx

const products = [
  { id: 1, name: "Banarasi Silk", price: 4999 },
  { id: 2, name: "Kanchipuram Silk", price: 6999 },
  { id: 3, name: "Cotton Saree", price: 1999 },
];

function App() {
  return (
    <div>
      {products.map((product) => (
        <ProductCard key={product.id} name={product.name} price={product.price} image="/placeholder.jpg" />
      ))}
    </div>
  );
}

21. A Better ProductCard API

tsx

<ProductCard product={product} />

function ProductCard({ product }: { product: { name: string; price: number; image: string } }) {
  return (
    <article>
      <img src={product.image} alt={product.name} />
      <h2>{product.name}</h2>
      <p>INR {product.price}</p>
    </article>
  );
}

22. Designing a Component API

A good component API is clear, predictable, easy to use, hard to misuse, and purposefully flexible.

tsx

<Button variant="primary" size="large" disabled={false} onClick={handleClick}>
  Save
</Button>

23. Avoid Too Many Special Cases

Prefer meaningful variants and sizes instead of many booleans like isBlue, isBig, isSpecial.

24. Reusable Components and Events

tsx

function SearchBox({
  value,
  onChange,
  onSubmit,
}: {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}) {
  return (
    <form onSubmit={onSubmit}>
      <input value={value} onChange={onChange} />
      <button type="submit">Search</button>
    </form>
  );
}

tsx

function Modal({ title, children, onClose }: { title: string; children: React.ReactNode; onClose: () => void }) {
  return (
    <div className="modal">
      <div className="modal-content">
        <h2>{title}</h2>
        <div>{children}</div>
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
}

26. Reusable Components and Conditional UI

tsx

function StatusBadge({ status }: { status: "success" | "error" | "pending" }) {
  if (status === "success") return <span>Success</span>;
  if (status === "error") return <span>Error</span>;
  return <span>Pending</span>;
}

27. Reusable Loading Component

tsx

function Loading({ message = "Loading..." }: { message?: string }) {
  return (
    <div>
      <span>Loading...</span>
      <p>{message}</p>
    </div>
  );
}

28. Reusable Empty State

tsx

function EmptyState({
  title,
  message,
  action,
}: {
  title: string;
  message: string;
  action?: React.ReactNode;
}) {
  return (
    <section>
      <h2>{title}</h2>
      <p>{message}</p>
      {action}
    </section>
  );
}

29. Reusable Components in a Real Project

text

src/
├── components/
│   ├── Button.jsx
│   ├── Input.jsx
│   ├── Card.jsx
│   ├── Modal.jsx
│   ├── Navbar.jsx
│   └── ProductCard.jsx
├── pages/
│   ├── Home.jsx
│   ├── Products.jsx
│   └── Checkout.jsx
└── App.jsx

30. Component Reuse Across Pages

text

Home: Navbar + ProductCard + Footer
Products: Navbar + ProductCard + Footer
Checkout: Navbar + Button + Footer

31. Reusability and Consistency

When behavior or styles improve in one shared component, all consumers benefit.

32. Reusable Does Not Mean Universal

Do not force every domain into one mega generic component if focused components are clearer.

33. Reusable vs Specialized Components

Reusable: Button, Input, Modal, Card. Specialized: CheckoutSummary, OrderTracking.

34. Hide Implementation Details

Consumers should use component intent, not internal CSS details.

35. Before Reusability

tsx

function Home() { return <button className="primary-button">Buy</button>; }
function ProductPage() { return <button className="primary-button">Add to Cart</button>; }
function Checkout() { return <button className="primary-button">Pay</button>; }

36. After Reusability

tsx

function Button({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) {
  return (
    <button className="primary-button" onClick={onClick}>
      {children}
    </button>
  );
}

37. Reusability + Props + Composition

text

Component
  ├── props (data)
  ├── children (content)
  └── callbacks (behavior)
        ↓
     Reusable UI

38. A Complete Reusable Card

tsx

function Card({
  title,
  description,
  children,
  footer,
}: {
  title: string;
  description: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}) {
  return (
    <article className="card">
      <header>
        <h2>{title}</h2>
        <p>{description}</p>
      </header>
      <div className="card-body">{children}</div>
      {footer && <footer>{footer}</footer>}
    </article>
  );
}

39-43. Common Mistakes

Hardcoding data in components meant to be reused.
Creating overly generic universal components with too many flags.
Duplicating near-identical components instead of parameterizing.
Over-abstraction that hides real domain differences.
Ignoring composition and forcing everything through props.

44. Reusability Is About Abstraction

text

Repeated UI
  ↓
Identify common structure
  ↓
Extract component
  ↓
Expose meaningful props
  ↓
Reuse component

45. Practical Project Exercise

Create:

text

components/Button.jsx
components/Card.jsx
components/ProductCard.jsx
components/Navbar.jsx

Then build a product listing page by composing those components.

46. The Reusability Test

What part is common?
What part changes?
Can the changing part become props?
Would children improve flexibility?
Does extraction make code clearer?

47. Interview Questions

Q1. What is component reusability?

Component reusability is designing components that can be used in multiple contexts with different data, content, or behavior.

Q2. How do props help with reusability?

Props allow one component implementation to behave differently per use.

Q3. What is composition?

Composition combines smaller components to build larger features.

Q4. Should every repeated JSX fragment become a component?

No. Extract when it improves clarity, maintainability, or meaningful reuse.

Q5. What makes a good reusable component?

Clear responsibility, simple API, predictable behavior, and sensible composition points.

48. Key Mental Model

text

Reusable Component
  ├── Data      -> props
  ├── Content   -> children
  └── Behavior  -> callbacks
         ↓
      Flexible UI

Final Takeaway

Component reusability is about building UI once and using it many times without duplicating implementation.

The most important tools are props, children, and composition.

Strong React engineers ask: what is stable in this component, what should be configurable, and what should remain internal?

Ready to mark this lesson complete?Track your journey across the entire course.

Component Reusability

Component Reusability

Learning Objectives

1. What Is Component Reusability?

2. Why Reusability Matters

3. Think in UI Building Blocks

4. The Basic Pattern

5. Example: Reusable Product Card

6. Props Make Reusability Possible

7. Component Reuse Through children

8. Reusable Button

9. Reusable Input

10. Reusable Avatar

11. Reusable Alert

12. Reusable Navbar

13. Reusable Layout Components

14. Component Composition

15. Reusability Through Composition

16. Clear Responsibilities

17. Do Not Extract Everything

18. Avoid Premature Abstraction

19. The Rule of Repetition

20. Reuse Data, Not Just Markup

21. A Better ProductCard API

22. Designing a Component API

23. Avoid Too Many Special Cases

24. Reusable Components and Events

25. Reusable Modal

26. Reusable Components and Conditional UI

27. Reusable Loading Component

28. Reusable Empty State

29. Reusable Components in a Real Project

30. Component Reuse Across Pages

31. Reusability and Consistency

32. Reusable Does Not Mean Universal

33. Reusable vs Specialized Components

34. Hide Implementation Details

35. Before Reusability

36. After Reusability

37. Reusability + Props + Composition

38. A Complete Reusable Card

39-43. Common Mistakes

44. Reusability Is About Abstraction

45. Practical Project Exercise

46. The Reusability Test

47. Interview Questions

48. Key Mental Model

Final Takeaway