What are Compound Components?

Compound components in React are components that are composed of two or more separate components.

Introduction

The first pattern we will consider is called the Compound Components pattern. I know it sounds fancy, but I’ll break it down.

The keyword in the pattern’s name is the word Compound.

Literally, the word compound refers to something that is composed of two or more separate elements.

With respect to React components, this could mean a component that is composed of two or more separate components.

It doesn’t end there though.

Any React component can be composed of 2 or more separate components. So, that’s really not a good way to describe compound components.

With compound components, there’s more. The separate components within which the main component is composed cannot be used without the parent.

The main component is usually called the parent, and the separate composed components, children.

Get hands-on with 1000+ tech skills courses.