Unveiling the Hidden Gem of React: The Power of Compound Components
Tags: react, designsystem, designpatterns, component
Published: 2024-03-14 13:56:13

Introducing Compound Components: a transformative approach **revolutionizing the development of design systems** with a heightened focus on **developer experience**. In today's development landscape, where **developer satisfaction is paramount**, Compound Components offer **unparalleled flexibility and streamline workflows** within React applications.

---

## Thanks

Before delving into the heart of the matter, I'd like to extend my heartfelt thanks to [Tristan](https://www.linkedin.com/in/tristan-ramirez/) 🫶 from Ornikar 🚗 for introducing me to Compound Components. I greatly appreciate his insight into this fascinating aspect of React development. Thank you, Tristan, for this discovery!

---

## Unleash Innovation in Design Systems

Prepare to embark on a journey into the heart of React's hidden gem: **Compound Components**. This captivating concept isn't just another tool in the developer's arsenal—it's a **game-changer for design systems**. By empowering developers with the ability to **craft modular**, **customizable interfaces**, Compound Components redefine the boundaries of what's possible in modern web development.

---

## But what is this ?

Imagine you're building a house. Rather than stacking bricks haphazardly, you create modular parts that **fit together harmoniously** to form a coherent whole. With Compound Components, you're not just assembling UI elements—you're **orchestrating an immersive user and developer experience**. Each component serves as a building block, seamlessly integrating with its counterparts to create **cohesive, dynamic interfaces**.

---

## Understanding Compound Components with examples

To truly grasp the power of Compound Components, let's compare examples **with and without their utilization**. We'll explore how Compound Components streamline development and enhance code organization. 

Imagine a Modal where the header, the body and the footer is **customizable** :

### Without Compound Components

```jsx
export const Modal = ({ header, body, footer }) => {
  return (
    <div className="modal">
      <div className="modal-header">{header}</div>
      <div className="modal-body">{body}</div>
      <div className="modal-footer">{footer}</div>
    </div>
  );
}
```

In this approach, we've coded a component just for its style and to implement a precise layout.
Now if we want to use it, it will look like this :

```jsx
<Modal
  header={<header>My title</header>}
  body={
    <div>
      <bold>My bold element</bold>
      <p>
        My text <span>with a span</span>
      </p>
    </div>
  }
  footer={
    <footer>
      <div>Element1</div>
      <div>Element2</div>
      <a href="#">My link</a>
    </footer>
  }
/>
```

You can see that in terms of developer experience, it's **not great**. It's **heavy**, it's **ugly**!

### With Compound Components

Now, let's see how Compound Components offer a more flexible solution:

```jsx
export const Modal = ({ children }) => {
  return (
    <div className="modal">
      {children}
    </div>
  );
}

Modal.Header = ({ children }) => {
  return (
    <div className="modal-header">{CHILDREN}</div>
  )
}

Modal.Body = ({ children }) => {
  return (
    <div className="modal-body">{children}</div>
  )
}

Modal.Footer = ({ children }) => {
  return (
    <div className="modal-footer">{children}</div>
  )
}
```

Now if you want to use your modal, you can use it like this :

```jsx
<Modal>
  <Modal.Header>Title of the Modal</Modal.Header>
  <Modal.Body>Content of the Modal</Modal.Body>
  <Modal.Footer>
    <button onClick={closeModal}>Close</button>
  </Modal.Footer>
</Modal>
```

And you can choose whether or not to use certain elements :

```jsx
<Modal>
  <Modal.Header>Title of the Modal</Modal.Header>
  <Modal.Body>Content of the Modal</Modal.Body>
</Modal>
```

By composing these Compound Components, we create a modal that's **highly customizable and easily maintainable**. **Any changes** to the modal structure, styling, or functionality **can be made by simply adjusting the components' arrangement or adding/removing components, without touching their implementation details.**

---

## Conclusion

In conclusion, Compound Components provide a **superior approach** to building modular and **customizable interfaces** compared to traditional methods. By decoupling structure from implementation, Compound Components offer enhanced **flexibility**, code **organization**, and **reusability**. Incorporate Compound Components into your React projects to unlock their full potential and streamline your development workflow.