Introduction to State Management
Explore how to manage application state effectively in React using Redux and the Context API. Understand challenges of state complexity, the role of React hooks like useReducer, and why Redux remains a popular tool for predictable global state management despite new React features.
We'll cover the following...
Global state management
The more an application grows in size, the more its complexity and data grow. Managing the application state becomes increasingly difficult and cumbersome. You might wonder when to pass props, to which component, and how to pass them. Other questions you may have are how the props influence the state of your components, and what happens if you change the state of a component.
In the past few years, React has introduced great tooling to deal with the increase of complexity in the application state. The Context API as well as the useReducer Hook have been great additions to the React developer’s toolbox and allow us to work more easily with complex data. However, in some cases, it’s still challenging to keep track of all the different pieces of data and how they transform. To deal with this type of problem, external tools for global state management can be a great choice.pieces of data and how they transform. To deal with this type of problem, external tools for global state management can be a great choice.
The React ecosystem gives us many libraries to choose from.
Tools for global state management
One of the more commonly known tools is MobX, which describes itself as a “Simple, scalable state management” solution. The other well-known tool in the industry is Redux. Redux was developed in part by Dan Abramov and Andrew Clark, who are now part of the official React Core Team. It positions itself as “A predictable state container for JavaScript apps.” Redux is arguably the more dominant tool, boasting higher usage stats and downloads.
Redux
Many will find using Redux pleasant and useful for a number of projects. Redux also has around 4 million weekly installations. Compared to MobX—which still has a very respectable number of 200,000 installations per week—Redux is the dominant force in the React ecosystem.
Despite a number of voices that keep proclaiming Redux’s death, the interest in Redux has remained steady over the years and the number of downloads is still growing. When the Context API was introduced with React 16.3.0, Redux was said to be obsolete. Once React 16.8.0 introduced Hooks—more specifically the useReducer Hook—criticism was again levied at Redux. Despite all this criticism, the number of installations of Redux keeps growing.
In fact, Redux makes use of Context and Hooks under the hood and uses these principles to optimize its own performance and simplify its API. Moreover, Redux has seen a great increase of custom add-ons and tools for its own ecosystem, which is enhanced, rather than replaced, by the new functionality offered by React.