Compound Components In React
About The Author
Ichoku Chinonso is a Frontend Engineer based in FCT Abuja, Nigeria. He is keen about building products that not only solve problems but also add value to …
A compound component is one of the advanced patterns of React which makes use of an interesting way to communicate the relationship between UI components and share implicit state by leveraging an explicit parent-child relationship.
Compound components help developers build more expressive and flexible APIs to share state and logic within components. This tutorial explains how this can be achieved with the help of using the Context API and React to build components by using this advanced pattern.
Note: In order to be able to follow along, you’ll need a basic understanding of React and how the Context API works.
What Is A Compound Component?
Compound components can be said to be a pattern that encloses the state and the behavior of a group of components but still gives the rendering control of its variable parts back to the external user.
From the definition above, taking note of the keywords: state and behavior. This helps us understand that compound component deal with state (i.e. how state behaves across a component which is enclosed by an external user being the parent of the component).
The objective of compound components is to provide a more expressive and flexible API for communication between the parent and the child components.
Think of it like the
<option> tags in HTML:
select tag works together with the
option tag which is used for a drop-down menu to select items in HTML. Here the
<select> manages the state of the UI, then the
<option> elements are configured on how the
<select> should work. Compound components in React are used to build a declarative UI component which helps to avoid prop drilling.
Prop drilling is passing props down multiple child components. This is also what they call a “code smell”. The worst part of prop drilling being that when the parent component re-renders, the child components will also re-render and cause a domino effect on the component. A good solution would be to use the React Context API which we will also look into later.
Meet Smashing Online Workshops on front-end & UX, with practical takeaways, live sessions, video recordings and a friendly Q&A. On design systems, CSS/JS and UX. With Carie Fisher, Stefan Baumgartner and so many others.
Applying Compound Components In React
This section explains the packages we can make use of in our application which adopt the compound component pattern of building components in React. This example is a component from the
@reach UI package.
Here’s a way you can use the
The example code above is one of the implementations of compound components in which you get to see that the
MenuLink were all imported from
@reach/menu-button. As opposed to exporting a single component, ReachUI exports a parent component which is
Menu accompanying its children components which are the
MenuItem and the
When Should You Make Use Of Compound Components?
As a React developer, you should make use of compound components when you want to:
Pros And Cons Of Compound Components
A compound component is an awesome React pattern to add to your React developer toolkit. In this section, I’ll state the pros and cons of using compound components and what I have learned from building components using this pattern of development.
Separation Of Concern
Having all the UI state logic in the parent component and communicating that internally to all the child components makes for a clear division of responsibility.
As opposed to prop drilling to pass down properties to their specific components, child props go to their respective child components using the compound component pattern.
One of the major cons of building components in React with the compound component pattern is that only
direct children of the parent component will have access to the props, meaning we can’t wrap any of these components in another component.
A solution to this issue would be to use the flexible compound component pattern to implicitly share state using the
Context API makes it possible to pass React state through nested components when building using the compound component pattern of building components in React. This is possible because
context provides a way to pass data down the component tree without having to pass props down manually at every level. Making use of Context API provides loads of flexibility to the end-user.
Maintaining Compound Components In React
Compound components provide a more flexible way to share state within React applications, so making use of compound components in your React applications makes it easier to maintain and actually debug your apps.
Building A Demo
In this article, we are going to build an accordion component in React using the compound components pattern. The component we are going to be building in this tutorial would be a custom-made accordion component that is flexible and shares state within the component by using the Context API.
First of all, let’s create a React app by using the following:
The commands above create a React app, change the directory to the React project, and start up the development server.
Note: In this tutorial, we will be making use of
styled-components to help style our components.
Use the command below to install
In the src folder, create a new folder called components. This is where all our components would live. Within the components folder, create two new files:
accordion.styles.js file contains our styling for the
Accordion component (our styling was done using
Above is an example of styling components using the
css-in-js library called
accordion.styles.js file, add the remaining styles:
Let’s start building our accordion component. In the
accordion.js file, let’s add the following code:
Above, we are importing the
useContext and the
createContext hooks which will help us to build our accordion component using compound components.
The React documentation explains that
context helps provide a way to pass data through the component tree without having to pass props down manually at every level.
Looking at what we have imported earlier in our
accordion.js file, you will notice that we also imported our styles as components which will help us build our components faster.
We will go ahead and create our context for the component which will share data with the components that need them:
Container and the
Inner components from the above code snippet are from our
./accordion.styles.js file in which we created styles for our components using the
styled-components (from the
css-in-js library). The
Container component houses the whole
Accordion we are building by using compound components.
Here we are creating a context object using the
createContext() method, so when React renders a component that subscribes to this Context object, it will read the current context value from the closest matching Provider above it in the tree.
Then we are also creating our base component which is the Accordion; it takes the
children and any
restProps. This is our parent component which houses the children components of the Accordion.
Let’s create other children components within the
. after the parent Accordion component; this is used to connect the child component to its parent component.
Let’s continue. Now add the following to the
So here we are creating a
Item component which are all children of the parent component
Accordion. This is where it might start to get tricky. Also, notice that each child component created here also receives a
children prop and
Item child component, we initialized our state using the
useState hook and set it true. Then also remember that we created a
ToggleContext at the top level of
accordion.js file which is a
Context Object, and when React renders a component that subscribes to this Context object, it will read the current context value from the closest matching Provider above it in the tree.
Every Context object comes with a
Provider React component that allows consuming components to subscribe to context changes.
provider component accepts a
value prop to be passed to consuming components that are descendants of this provider, and here we are passing the current state value which is the
toggleShow and method to set the value of the current state
setToggleShow. They are the value that determines how our context object will share state around our component without prop drilling.
Then in our
header child component of the
Accordion, we are destructing the values of the context object, then changing the current state of the
toggleShow on click. So what we are trying to do is to hide or show our accordion when the Header is clicked on.
Accordion.Body component, we are also destructing the
toggleShow which is the current state of the component, then depending on the value of
toggleShow, we can either hide the body or show the contents of the
So that’s all for our
Now this is where we get to see how everything we have learned about
Compound components come together. But before that, let’s create a new file called
data.json and paste the content below into it:
This is the data we will be working with in order to test our accordion component.
So let’s keep going. We are almost through and I believe you have learned a lot from following this article.
In this section, we are going to bring together everything we have been working on and learning about compound components to be able to use it in our
App.js file to use the
Array.map function to display the data we already have on the web page. Also notice that there was no use of state within the
App.js; all we did was pass down data to the specific components and Context API took care of every other thing.
Now on to the final part. In your
App.js, do the following:
In your App.js file, we imported our Compound Component Accordion from the file path, then also imported our dummy data, mapped through the dummy data in order to get the individual items in our data file, then displayed them in accordance with the respective component, also you would notice that all we had to do was to pass the children to the respective component, the Context API takes care of ensuring that it reaches the right component and there was no prop drilling.
This is what our final product should look like:
Alternative To Compound Components
An alternative to using compound components would be to make use of the Render Props API. The term Render Prop in React refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
To pass data from a component down to a child component that needs the data may result to prop drilling when you have components nested within each other. This is the advantage of using Context to share data between components over using the render prop method.
In this article, we learned about one of the advanced patterns of React which is the compound component pattern. It’s an awesome method to build reusable components in React by using the compound component pattern to build your component offers you a lot of flexibility in your component. You can still opt to make use of Render Prop if flexibility is not what your component requires at the moment.
Compound components are most helpful in building design systems. We also went through the process of sharing the state within the components using the Context API.
(ks, vf, yk, il)
This content was originally published here.