Component Composition in React

Component composition is a design pattern in React where you build your UI by combining small, independent, and reusable components to create a larger and more complex component or application. It promotes the idea of breaking down your user interface into smaller, manageable pieces, making it easier to understand, maintain, and scale.

Problem: Lack of Reusability and Modularity

Suppose you have a complex UI component, and you realize that certain parts of it could be reused in other parts of your application. Without component composition, you might end up with large monolithic components that are hard to maintain and aren't easily reusable.

Solution: Component Composition

Let's create a simple example to illustrate component composition. We'll build a Card component that consists of smaller reusable components like Header, Body, and Footer.

Step 1: Problem Code

import React from 'react';

const MonolithicCard = () => {
  return (
    <div className="card">
      <div className="header">
        <h2>Title</h2>
      </div>
      <div className="body">
        <p>Card content goes here.</p>
      </div>
      <div className="footer">
        <button>Click me</button>
      </div>
    </div>
  );
};

In this monolithic example, all the card-related content is bundled together in a single component, making it less reusable and harder to maintain.

Step 2: Solution - Component Composition

Let's refactor the code using component composition. We'll create smaller components (Header, Body, and Footer) and compose them in the Card component.

import React from 'react';

// Header component
const Header = ({ title }) => (
  <div className="header">
    <h2>{title}</h2>
  </div>
);

// Body component
const Body = ({ content }) => (
  <div className="body">
    <p>{content}</p>
  </div>
);

// Footer component
const Footer = ({ buttonText }) => (
  <div className="footer">
    <button>{buttonText}</button>
  </div>
);

// Card component using component composition
const Card = ({ title, content, buttonText }) => (
  <div className="card">
    <Header title={title} />
    <Body content={content} />
    <Footer buttonText={buttonText} />
  </div>
);

Step-by-Step Explanation:

Create Smaller Components (Header, Body, Footer):

   const Header = ({ title }) => (
     <div className="header">
       <h2>{title}</h2>
     </div>
   );

   const Body = ({ content }) => (
     <div className="body">
       <p>{content}</p>
     </div>
   );

   const Footer = ({ buttonText }) => (
     <div className="footer">
       <button>{buttonText}</button>
     </div>
   );

Create smaller, reusable components for the header, body, and footer.

Compose Components in the Card Component:

   const Card = ({ title, content, buttonText }) => (
     <div className="card">
       <Header title={title} />
       <Body content={content} />
       <Footer buttonText={buttonText} />
     </div>
   );

Use these smaller components in the Card component, creating a composed structure.

Now, you can use the Card component throughout your application, and you also have the flexibility to reuse the Header, Body, and Footer components independently. Component composition promotes reusability, modularity, and easier maintenance of your code.

"Your feedback and ideas are invaluable – drop a comment, and let's make this even better!"

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Blog

Component Composition in React

Vivek Kurmi

Problem: Lack of Reusability and Modularity

Solution: Component Composition

Step 1: Problem Code

Step 2: Solution - Component Composition

Step-by-Step Explanation:

Join Our Newsletter. No Spam, Only the good stuff.

Related