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

## Refactoring to useReducer
The most intuitive way to make the state reducer pattern work is using the `useReducer` hook to manage the internal state. 

First, let’s refactor our custom hook to use `useReducer` instead of `useState`. 

To refactor our custom hook to use the `useReducer` hook for state updates, everything within the custom hook stays the same except how the `expanded` state is managed. 

Here’s what’s to be changed. 

First, we’ll change the state from just a boolean value, `true` or `false`, to an object like this: `{expanded: true || false}`.

# Refactoring to useReducer
The most intuitive way to make the state reducer pattern work is using the `useReducer` hook to manage the internal state. 

First, let’s refactor our custom hook to use `useReducer` instead of `useState`. 

To refactor our custom hook to use the `useReducer` hook for state updates, everything within the custom hook stays the same except how the `expanded` state is managed. 

Here’s what’s to be changed. 

First, we’ll change the state from just a boolean value, `true` or `false`, to an object like this: `{expanded: true || false}`.

Let’s modify our custom hook to use `useReducer` instead of `useState`. 

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

Refactoring to `useReducer`

Refactoring to useReducer