Unveiling the Hidden Gem of React: The Power of Compound Components

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 🫶 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

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 :

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

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 :

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

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

Comments

[Valery Zinchenko]

Is this written by an AI?, Please specify.

Why is this better than creating function ModalHeader() { ... }?
It seems this absolutely the same approach, but with nesting related functions in main component function. AFAIK this is not a design solution but merely a code style preference.

[Nicolas B.]

Hi Valery!

I'm helped by an AI to make better sentences in english because I'm french. The core of the article, the plan and exemples are constructed by me. I used AI to translate my sentences.

It's an intresting design pattern when you have a lot of components.
If you have a PrimaryModal and a SecondaryModal, you can stay in the scope of your component by using Compound Components. The Developer experience is also better because you know what you can use in PrimaryModal by writing the dot after it you can see what can be used in child like PrimaryModal.Body, PrimaryModal.Header, etc....

Have a good day! :)