Gain insights into advanced React patterns with hooks. Learn about optimizing components with hooks over traditional methods like render props or higher-order components for better efficiency.

With the release of hooks, certain React patterns have gone out of style. Hooks are likely the way we’ll be writing React components for the next couple of years, so they are quite important. React patterns can still be used, but in most cases, developers will be better off using hooks. For example, they should choose hooks over render props or higher-order components. There may be specific cases where the aforementioned could still be used, but most of the time, hooks are better. That being said, this course will teach you some of the more advanced React patterns implemented with hooks.

Advanced React Patterns With Hooks

# 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**.



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

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

What are Compound Components?

Introduction