Loading
MindXchange
MindXchange
MindXchange

Quipoin Menu

Learn • Practice • Grow

Tutorial Exercises MCQs Interview Q & A Tests
react / Component Composition in React
tutorial
ExercisesInterview QsMCQVideosDiscussion

Component Composition in React

In React, composition is a natural pattern where you build complex UIs by combining simpler, smaller components. It's like assembling a car – you don't build the entire car as one unit; you combine an engine, wheels, seats, and a chassis to create the final product.

What is Component Composition?

Component composition simply means using components inside other components. It's a fundamental concept in React that encourages reusability and separation of concerns.

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.

Basic Composition

The simplest form of composition is just rendering one component inside another.
function Button({ children }) {
  return <button className="btn">{children}</button>;
}

function Form() {
  return (
    <form>
      <input type="text" placeholder="Name" />
      <Button>Submit</Button>  <!-- Button component inside Form -->
    </form>
  );
}

Composition with Props

Props allow you to customize composed components, making them flexible and reusable.
function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}

function App() {
  return (
    <Card title="Welcome">
      <p>This is the card content.</p>
      <button>Click me</button>
    </Card>
  );
}

The `children` Prop for Composition

The `children` prop is especially powerful for composition. It allows components to accept any JSX as their content, making them extremely flexible containers.
function Layout({ header, sidebar, children }) {
  return (
    <div className="layout">
      <header>{header}</header>
      <div className="container">
        <aside>{sidebar}</aside>
        <main>{children}</main>
      </div>
    </div>
  );
}

Specialization vs. Composition

Sometimes you want a component that's a "special case" of another component. In React, you achieve this through composition, not inheritance.
function Dialog({ title, message, children }) {
  return (
    <div className="dialog">
      <h3>{title}</h3>
      <p>{message}</p>
      {children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting!"
    >
      <button>Start Exploring</button>
    </Dialog>
  );
}

`WelcomeDialog` is a specialized version of `Dialog`, created by composing `Dialog` with specific props and children.

Benefits of Composition

  • Reusability: Build once, use everywhere.
  • Separation of Concerns: Each component handles one specific part of the UI.
  • Flexibility: Components can accept different children and props to behave differently.
  • Maintainability: Smaller components are easier to understand, test, and update.
  • No Inheritance Needed: React's composition model replaces the need for complex inheritance hierarchies.

Two Minute Drill

  • Component composition means using components inside other components.
  • It's the primary way to build complex UIs from simple, reusable pieces.
  • The `children` prop is a powerful tool for creating flexible, container-like components.
  • Props allow you to customize composed components for different use cases.
  • React prefers composition over inheritance for code reuse.
  • Benefits: reusability, flexibility, maintainability, and clear separation of concerns.
Practice ExercisesInterview QuestionsTake Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com