The most popular way to handle shared application state in React is using a framework such as Redux. Quite recently, the React team introduced several new features which include React Hooks and the Context API. These two features effectively eliminated a lot of challenges that developers of large React projects have been facing. One of the biggest problems was ‘prop drilling’ which was common with nested components. The solution was to use a state management library like Redux. This, unfortunately, came with the expense of writing boilerplate code — but now, it’s possible to replace Redux with React Hooks and the Context API.
In this article, you are going to learn a new way of handling state in your React projects, without writing excessive code or installing a bunch of libraries — as is the case with Redux. React hooks allow you to use local state inside of function components, while the Context API allows you to share state with other components.
In order to follow along with this tutorial, you will need to have a good foundation in the following topics:
Getting Started with React
Your First Week with React
Foundation in Redux
You can access the complete project used in this tutorial for this GitHub Repository.
About the New State Management Technique
There are two types of state that we need to deal with in React projects:
How to Replace Redux with React Hooks and the Context API