Component Composition in React
Tags: react, javascript, webdev, designpatterns
Published: 2023-11-18 17:16:20

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

```jsx
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.

```jsx
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:

1. **Create Smaller Components (`Header`, `Body`, `Footer`):**
   ```jsx
   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.

2. **Compose Components in the `Card` Component:**
   ```jsx
   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](https://www.linkedin.com/in/kurmivivek295/)