How to Reuse React Components with Props and Composition

Reuse React components by giving them props and composing them with children. A single component definition can render in many places with different content, instead of copying markup for each variation. Reuse keeps the UI consistent and the codebase small.

Reuse with props

A component with props is a template. This Badge renders different text and colors from the same definition:

App.jsx

function Badge({ label, tone }) {
  return <span className={"badge " + tone}>{label}</span>;
}
function App() {
  return (
    <>
      <Badge label="New" tone="green" />
      <Badge label="Sale" tone="red" />
    </>
  );
}

The browser shows two badges, one green and one red, both from the same Badge function. The markup is written once, and the props change only what differs between call sites.

Props are the primary reuse tool because they are explicit. Every caller states exactly what it needs, and the component stays focused on rendering.

The props guide covers reading, defaults, and passing any value. As a product grows, the same Badge can take on new props like an icon without touching its callers.

Reuse with children

When a component wraps content, reuse comes from the children prop. One Card frames many different bodies:

App.jsx

function Card({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

A parent fills the Card with whatever it needs. The Card stays generic, so the same definition works for a profile, a receipt, or a warning without changes. This wrapper pattern is the heart of composition.

A wrapper is reusable because it does not decide its content. The parent owns the content, and the wrapper owns only the frame and styling. A generic wrapper plus parent-owned content is the same pattern behind layouts, modals, and dialogs.

Reuse with composition

You can also specialize a generic component by rendering it with fixed props:

App.jsx

function SuccessBadge({ label }) {
  return <Badge label={label} tone="green" />;
}

SuccessBadge is a reusable, green-only Badge. Composition builds specific pieces out of general ones, which is the same idea behind composition over inheritance. A specialized component can also fix one prop while leaving the rest open.

When not to extract

Extract a component when markup repeats with small differences. Do not extract when two blocks only look similar but will drift apart.

• Same structure, different data: extract.
• Used in several places: extract.
• One-off markup: leave it inline.

A component that is too abstract, with many props for a single caller, is harder to read than the markup it replaced. Reuse should remove duplication without hiding what the UI actually does.

Write the markup twice before you extract. Extract only when a third copy appears, so you do not abstract too early.

What to learn next

Practice the children pattern, then add TypeScript so your reusable components reject the wrong props before they render.