The main purpose of this article is to get an understanding of useContext and useReducer and how they can work together to make React applications and their state management clean and efficient.

The new Hooks API allows for some amazing features to be accessed across React applications which can potentially eliminate the need for state management libraries, like Redux or Flux. Better yet, we can accomplish this with functional components. No class components necessary, just JavaScript.

To start, there will be an overview of the “pre-hooks” Context API, best practices, and implementation within a React application. Once the base is layed and an example portrayed, said example will be refactored to implement useContext. Transitioning from useContext, a focus on the concepts surrounding a reducer function will lead to the implementation of useReducer and how it’s used to manage complex state. After establishing a solid understanding of the two hooks, they will be combined to create a React-only state management tool.

#react #react-native #reactjs #react hooks