State Management with React Hooks and Context API

State Management with React Hooks and Context API

There are many ways how to handle global application states like Redux, MobX, etc. Do you remember all the stuff like the store, actions, and reducers in Redux? And then all those connect, mapStateToProps and other functions to be able to access the state?

Many React developers default to Redux for state management without considering other alternatives.

In this article, I will introduce the React Context API for state management and create a similar solution as Redux without using a third-party library.

React Context API

It’s actually not a new idea. Context API as part of React for a long time, but only in an experimental state.

Since React 16.3.0 it’s officially stable and ready to use in production.

State Management using redux and react-redux

Redux consists of four main building blocks:

1. A single, centralized state (i.e. a global JS object you could say) that is not directly accessible or mutable
2. Reducer functions that contain the logic to change and update the global state (by returning a new copy of the old state with all the required changes)