DEV Community

Cover image for Unveiling the Hidden Gem of React: The Power of Compound Components
Nicolas B.
Nicolas B.

Posted on • Originally published at brdnicolas.com

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  }
/>
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
framemuse profile image
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.

Collapse
 
brdnicolas profile image
Nicolas B. • Edited

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