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.
Prerequisites
In order to follow along with this tutorial, you will need to have a good foundation in the following topics:
The technique you will learn here is based on patterns that were introduced in Redux. This means you need to have a firm understanding of reducers and actions before proceeding. I am currently using Visual Studio Code, which seems to be the most popular code editor right now (especially for JavaScript developers). If you are on Windows, I would recommend you install Git Bash. Use the Git Bash terminal to perform all commands provided in this tutorial. Cmder is also a good terminal capable of executing most Linux commands on Windows.
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:
The post How to Replace Redux with React Hooks and the Context API appeared first on SitePoint.
No comments:
Post a Comment