Member-only story
React State Management
Understand how to pick the right state management solution for your project and know when to use Redux
If you look around in the community, you will always come across the following question: How do I manage my state in React?
Devs who have previously worked with other frameworks like Angular or Vue.js ask themselves how to manage their state in React. Often, the question concerns an official solution for state management.
Another question devs have had since the introduction of the Context API and Hooks API in React 16.8 is how to decide between Redux or the Context API with useState/useReducer to manage its global state.
I would like to answer both questions in the following article. For this purpose, I did some research in the community and got the opinions of many experienced React developers.
What Is State Management?
Before we begin, however, I would like to clarify a few basic points. Before we can solve the question of the right state management, I think we need a definition of what exactly state management means.
The state describes the condition of an application at a given point in time.
Sub-types of the state are:
- Server state
- Navigation state
- Local UI state
- Global UI state
State management describes the maintenance of the state/knowledge of an application depending on all inputs.
Inputs usually take place on the server (API) or the client (user).
Accordingly, the difficulty of state management arises from the coordination of all subtypes of state in an application.
What Does State Mean in React?
The UI is the visual representation of the state of an application. As described above, state represents the state of an application at a given point in time.
In React, the state is a data structure that reflects the current state of the UI.
The state can consist of different kinds of data:
