Introduction

One of the most useful and widely used concepts in the world of React is design patterns, as they help keep code scalable and give added meaning to the components we create.

There are various patterns, and in this article, we’ll discuss Compound Components, an advanced pattern that is especially useful for creating flexible and composable interfaces.

What is Compound Components?

Compound Components is an advanced pattern in React. Its goal is to create a more flexible design by enabling the sharing of state and logic among a group of components. This way, communication between the parent component and child components can be achieved in a flexible manner.

The components work together to achieve certain behaviors without creating complex prop trees or overly complicated logic that would be difficult to refactor or understand in the future.

This pattern helps eliminate prop drilling, where we pass down a large number of props through several component layers. Prop drilling can be problematic, as it may cause unnecessary re-renders every time the state is updated, since each state change will update all child components.

An example of Compound Components can be seen in the HTML structure of select and option tags:

Creating the base of the Modal component:

Now we need to create the toggle component, which will be responsible for opening the Modal:

Finally, we can add both components to our Modal component, and it’s ready to go! 😊

Result:

Menu components:

, a BR repository that brings together articles created by developers in the React universe. It’s worth checking out!