What is a compound component in ReactJS?

Compound components are a pattern that encloses the state and the behavior of a group of components. But it still gives the rendering control of its variable parts back to the external user. So, in this article, we will see what is a compound component is in ReactJS.

What is a compound component in ReactJS?

Compound components help developers build more expressive and flexible APIs to share state and logic within components. The objective of compound components is to provide a more expressive and flexible API. This will help ing communication between the parent and the child components. Think of it like the <select> and <option> tags in HTML:

<select>
  <option value="volvo">Volvo</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

The select tag works together with the option tag. It is used for a drop-down menu to select items in HTML. Here the <select> manages the state of the UI. After that the <option> elements are configured on how the <select> should work. Compound components in React let you build a declarative UI component which helps to avoid prop drilling.

Prop drilling is passing props down multiple child components. This is also known as “code smell”. The disadvantage of prop drilling is when the parent component re-renders, the child components will also re-render. It will cause a domino effect on the component. A good solution would be to use the React Context API.

Applying Compound Components In React

This section explains the packages we can make use of in our application. It adopts the compound component pattern for building components in React. This example is a Menu component from the @reach UI package.

import {
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
  MenuItems,
  MenuPopover,
  MenuLink,
} from "@reach/menu-button";
import "@reach/menu-button/styles.css";

Here’s a way you can use the Menu component:

function Example() {
  return (
    <Menu>
      <MenuButton>Actions</MenuButton>
       <MenuList>
         <MenuItem>Download</MenuItem>
         <MenuLink to="view">View</MenuLink>
       </MenuList>
     </Menu>
);
}

The example code above is one of the implementations of compound components. You can see that the Menu, MenuButton, MenuList, MenuItem, and MenuLink were all imported from @reach/menu-button. As opposed to exporting a single component, ReachUI exports a parent component. This component is Menu accompanying its children components which are the MenuButton, MenuList, MenuItem, and the MenuLink.

When Should You Make Use Of Compound Components?

As a React developer, you should make use of compound components when you want to:

• Solve issues related to building reusable components;
• Development of highly cohesive components with minimal coupling;
• Better ways to share logic between components.

Pros And Cons Of Compound Components

A compound component is a really good React pattern to add to your React developer toolkit. In this section, let’s state the pros and cons of using compound components..

PROS:

• 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.
• Reduced Complexity
  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.

CONS:

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.

export default function FlyoutMenu() {
  return (
    <FlyOut>
      {/* This breaks */}
      <div>
        <FlyOut.Toggle />
        <FlyOut.List>
          <FlyOut.Item>Edit</FlyOut.Item>
          <FlyOut.Item>Delete</FlyOut.Item>
        </FlyOut.List>
      </div>
    </FlyOut>
  );
}

A solution to this issue would be to use the flexible compound component pattern to implicitly share state using the React.createContext API. So, context API makes it possible to pass React state through nested components. Because context provides a way to pass data down the component tree without having to pass props down manually. Making use of Context API provides loads of flexibility to the end-user.

Conclusion:

So, in this article, we have been through what is a compound component in ReactJS. Also, feel free to comment with your suggestions and feedback. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced React JS developers.