As a skilled React developer, I have come across many design patterns to make reusable and easy-to-maintain components. One pattern I really like is called the Compound Components pattern. This pattern helps developers create flexible and customizable components while keeping the code clean and easy to understand. In this article, I will talk about why I like this pattern, how to use it, and how to become an expert with it when making complex UI components like product cards and lists.

What is Compound Components Pattern?

The Compound Components pattern is a design method where a main component covers a group of related smaller components, giving a simple and easy-to-understand API for users. This method lets developers create complex components in a flexible way, allowing them to make highly customizable user interfaces with little extra code.

Advantages of the Compound Components Pattern

1. Flexibility: Compound components provide a flexible way to build complex UI components while maintaining a clean and concise API. This pattern allows you to create highly customizable and reusable components without passing too many props to the component.
2. Intuitive API: By encapsulating related child components within a parent component, the Compound Components pattern offers a clear and intuitive API that’s easy to understand and use for other developers.
3. Separation of Concerns: With compound components, each child component is responsible for its specific functionality, making it easier to maintain and update individual components without affecting the entire system. For example, if you have a product card and the product card has a price tag component then by separating the price tag component you can keep logic inside the product tag component instead of the parent Card component.
4. Enhanced Customization: This pattern allows developers to easily swap or extend child components, leading to enhanced customization options for various use cases. like number 3 you can easily manage and optimize each child component without affecting other components like siblings and parents.

Implementing a Product Card using the Compound Components Pattern
keep in mind we don't go too deep in our example and we are keeping it simple as possible to make sure you don't get bored and overwhelmed when you are reading this article. :)

Let’s create a Product Card component using the Compound Components pattern to showcase its power and flexibility.

1. First, let’s define the child components that will be used within our Product Card:

// ProductCardImage.tsx
const ProductCardImage = ({ src, alt }) => {
  return <img src={src} alt={alt} />;
};

// ProductCardTitle.tsx
const ProductCardTitle = ({ children }) => {
  return <h2>{children}</h2>;
};

// ProductCardDescription.tsx
const ProductCardDescription = ({ children }) => {
  return <p>{children}</p>;
};

2. Next, create the parent component, ProductCardand define the child components as properties:

// ProductCard.tsx
const ProductCard = ({ children }) => {
  return <div className="product-card">{children}</div>;
};

ProductCard.Image = ProductCardImage;
ProductCard.Title = ProductCardTitle;
ProductCard.Description = ProductCardDescription;

3. Finally, use the compound components to build a product card:

// Usage example
<ProductCard>
  <ProductCard.Image src="path/to/image.jpg" alt="Product Image" />
  <ProductCard.Title>Product Title</ProductCard.Title>
  <ProductCard.Description>Product Description</ProductCard.Description>
</ProductCard>

💡 Note: Once you’ve built this ProductCard component, it might be a good idea to isolate and extract this component into packages, so you can use an open-source toolchain like Bit to publish, version, and reuse it across all of your projects with a simple npm i @bit/your-username/ProductCard. Find out more here.

Learn more about building independent reusable React components here:

Conclusion

The Compound Components pattern is a powerful design pattern that allows developers to create flexible, maintainable, and customizable components in React. By understanding and mastering this pattern, you can create complex UI components with ease, making your code more readable and maintainable. Start incorporating the Compound Components pattern into your React projects and experience the benefits firsthand!

Useful links:

Build React Apps with reusable components, just like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo