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

## Scenario
Our user is a hacker who has found proof of a big conspiracy on Mars. To share this with the world, they want to use our `useExpanded` hook and the default UI elements we provide to build the following expandable view: 

<figure>
<center>
<img src="/api/collection/10370001/4597752283529216/page/5467377275764736/image/5723619923591168" />
</center>
</figure>

That’s the easy part. 

What’s more interesting is that the hacker only wants a reader to view this secret once. It’s such a big conspiracy. 

The hacker’s goal is that whenever the user clicks the button to view the secret, the expandable content is `reset` to the default unexpanded state. After that, the reader can click all they want on the header but the content won’t be expanded. 


Do you see why the user needs the state reducer pattern? 

### Calling Toggle When `Header` is Clicked 
By default, whenever the `Header` element is clicked, the hacker calls the `toggle` function. 

# Scenario
Our user is a hacker who has found proof of a big conspiracy on Mars. To share this with the world, they want to use our `useExpanded` hook and the default UI elements we provide to build the following expandable view: 

<figure>
<center>
<img src="/api/collection/10370001/4597752283529216/page/5467377275764736/image/5723619923591168" />
</center>
</figure>

That’s the easy part. 

What’s more interesting is that the hacker only wants a reader to view this secret once. It’s such a big conspiracy. 

The hacker’s goal is that whenever the user clicks the button to view the secret, the expandable content is `reset` to the default unexpanded state. After that, the reader can click all they want on the header but the content won’t be expanded. 


Do you see why the user needs the state reducer pattern? 

## Calling Toggle When `Header` is Clicked 
By default, whenever the `Header` element is clicked, the hacker calls the `toggle` function. 

In this lesson, we'll look at how our custom hook can be used in an application

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

The User’s Application

Scenario

Calling Toggle When `Header` is Clicked