Using the Reducer and Effect Hooks

After developing our own blog application using the State Hook, we are now going to learn about two other very important Hooks that are provided by React: the Reducer and Effect Hooks. We are first going to learn when we should use a Reducer Hook instead of a State Hook. Then, we learn how to turn an existing State Hook into a Reducer Hook in order to get a grasp on the concept in practice. Next, we are going to learn about Effect Hooks and what they are used for. Finally, we are going to implement them in our blog application.

The following topics will be covered in this chapter:

• Learning about the differences between Reducer Hooks and State Hooks
• Implementing Reducer Hooks in our blog app
• Using Effect Hooks in our blog app

Technical requirements

A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.

The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter04.

Check out the following video to see the code in action:

http://bit.ly/2Mm9yoC

Please note that it is highly recommended that you write the code on your own. Do not simply run the code examples that have been provided. It is important that you write the code yourself in order for you to be able to learn and understand properly. However, if you run into any issues, you can always refer to the code example.

Now, let's get started with the chapter.

Reducer Hooks versus State Hooks

In the previous chapter, we learned about dealing with local and global states. We used State Hooks for both cases, which is fine for simple state changes. However, when our state logic becomes more complicated, we are going to need to ensure that we keep the state consistent. In order to do so, we should use a Reducer Hook instead of multiple State Hooks, because it is harder to maintain synchronicity between multiple State Hooks that depend on each other. As an alternative, we could keep all state in one State Hook, but then we have to make sure that we do not accidentally overwrite parts of our state.

Problems with the State Hook

The State Hook already supports passing complex objects and...

Implementing Reducer Hooks

After learning about actions, reducers, and the Reducer Hook, we are going to implement them in our blog app. Any existing State Hook can be turned into a Reducer Hook, when the state object or state changes become too complex.

If there are multiple setState functions that are always called at the same time, it is a good hint that they should be grouped together in a single Reducer Hook.

Global state is usually a good candidate for using a Reducer Hook, rather than a State Hook, because global-state changes can happen anywhere in the app. Then, it is much easier to deal with actions, and update the state-changing logic only in one place. Having all the state-changing logic in one place makes it easier to maintain and fix bugs, without introducing new ones by forgetting to update the logic everywhere.

We are now going to turn some of the existing State...

Using Effect Hooks

The last essential Hook that we are going to be using frequently is the Effect Hook. Using the Effect Hook, we can perform side effects from our components, such as fetching data when the component mounts or updates.

In the case of our blog, we are going to implement a feature that updates the title of our web page when we log in, so that it contains the username of the currently logged-in user.

Remember componentDidMount and componentDidUpdate?

If you have worked with React before, you have probably used the componentDidMount and componentDidUpdate life cycle methods. For example, we can set the document title to a given prop as follows, using a React class component. In the following code section, the...

Summary

In this chapter, we first learned about actions, reducers, and Reducer Hooks. We also learned when we should use Reducer Hooks instead of State Hooks. Then, we replaced our existing global State Hooks for the user and posts states, with two Reducer Hooks. Next, we merged the two Reducer Hooks into a single app Reducer Hook. Finally, we learned about Effect Hooks, and how they can be used instead of componentDidMount and componentDidUpdate.

In the next chapter, we are going to learn about React context, and how to use it with Hooks. Then, we are going to add Context Hooks to our app, in order to avoid having to pass down props over multiple layers of components.

Questions

In order to recap what we have learned in this chapter, try to answer the following questions:

1. What are the common problems with State Hooks?
2. What are actions?
3. What are reducers?
4. When should we use a Reducer Hook instead of a State Hook?
5. Which steps are needed in order to turn a State Hook into a Reducer Hook?
6. How can we create actions more easily?
7. When should we merge Reducer Hooks?
8. What do we need to watch out for when merging Reducer Hooks?
9. What is the equivalent of an Effect Hook in class components?
10. What are the advantages of using an Effect Hook, versus class components?

Further reading

If you are interested in more information about the concepts that we have explored in this chapter, take a look at the following reading material:

• Official docs regarding the Reducer Hook: https://reactjs.org/docs/hooks-reference.html#usereducer
• Official docs and tips for using Effect Hooks: https://reactjs.org/docs/hooks-effect.html
• Learning Redux published by Packt for more in-depth information about actions, reducers, and managing the app state: https://www.packtpub.com/web-development/learning-redux