Components, Composition & Reuse

A React component is normally a function that returns React elements. Components become powerful when they are composed rather than built as large conditional blocks.

There are two common reuse mechanisms: props and composition. Props allow a parent to configure a child. Composition allows a parent to provide arbitrary React content, commonly through children or named props such as header, footer, or actions.

Prefer components that have a clear responsibility. A UserCard can render a user's presentation while receiving data and callbacks from its parent. It should not secretly fetch unrelated global data, manipulate another component's DOM, or contain every business rule in the application.

Component boundaries should follow change boundaries. If a section of UI has its own state, accessibility behavior, loading state, or reuse potential, it is a good candidate for a component.

Composition with children

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

function Profile() {
  return (
    <Card title="Profile">
      <p>Frontend engineer</p>
    </Card>
  );
}

💡 The Card owns layout while the caller owns the content. This keeps the component reusable without adding dozens of specialized props.

Key Takeaways

Prefer composition when callers need flexible content.
Avoid giant components that own unrelated responsibilities.
Good boundaries isolate behavior, styling, state, and change.

Knowledge Check

What is a common benefit of component composition?

Components, Composition & Reuse

STAY UPDATED WITH BYTES!