Introduction

We have seen in the previous chapter how Hooks, as compared to render props, can simplify a React app. The methodical approach of Hooks helps in creating easy-to-maintain and easily composable components, while keeping the React tree intact.

In this chapter, we are going to learn about state management in the functional components. The two most commonly used hooks that help us in making these components stateful are useState and useReducer. Over the course of this chapter, we will explore the trade-offs between the two and when to use which.

Since functional components cannot have life cycle methods to manage state, we had a discussion in the previous chapter about how the useEffect hook can perform identical functions, but without the risk of needing to group behavior together due to where it happens in the life cycle of the component. This has many advantages. For example, we can create separate and dedicated useEffect hooks to write to databases, to manipulate...