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

Our solution to the hacker’s feature request is to implement the state reducer pattern. 

When the reader clicks the `Header` element, we’ll communicate the changes we propose to be made internally to the hacker, i.e., we’ll let the hacker know we want to update the expanded state internally. 

The hacker will then check their own application state. If the reader has already viewed the secret resource, the hacker will communicate to our custom hook NOT to allow a state update. 

There it is. The power of the state reducer pattern, giving control of the internal state updates to the user. 

# Implementation
Now, let’s write the technical implementation. 

First, we’ll expect a second argument from the hacker, their own reducer. 

// Note the second parameter to our hook, useExpanded 👇
function useExpanded (initialExpanded = false, userReducer) {
 ...
}


The second parameter to our `useExpanded` hook represents the user’s reducer. 

After the refactor to `useReducer`, we got the value of the `expanded` state by calling our internal reducer. 

Let’s integrate the state reducer pattern into the scenario we studied earlier

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

Implementing the State Reducer Pattern