Skip to main content

State Management

Why is state management library needed ?​

React has a uni-directional data flow design, meaning data (referred as state in React land) can only flow in one way, i.e from parent component to children component. Despite the design brings advantages such as easier to debug, less error-prone and more efficient, it also introduces complexity as the React app grows in size and component amounts, where state management becomes crucial to ensure data flows efficiently between components.

Limited by the data flow, the simplest approach to share state among multiple components is the lift the state up to their mutual parent component, so that rerender of these children components will be triggered on state change. Passing state deeply down the component tree, however, leads to the props drilling problem.

To avoid props drilling, React provides a Context API to address the problem. While the context API (sometimes along with the useReducer hook in more complex scenarios) can cover most usecases, it still raise trade-offs such as:

  • Component is dependent on the context
  • Redundant rerender of children tree if not properly handled with hooks such as useMemo/useCallback or wrapped with memo
  • Complexity grows as context provider amount increases if broken down based on seperate-of-concern

Given above reasons, solutions that work efficiently for large apps as well as provide mechanism that offer more granular control on data management and change-subscription is required.

Mental Models of State Management Library​

State management libraries can be categorized into three main types based on their mental model: Flux, Proxy and Atomic, as well as relatively new fuss as of writing: Signal.

Flux Model​

Flux model (more of a concept instead of framework) is proposed by Facebook to solve their issue of intricate data flow in facebook app built on client-side MVC architecture, compoisng of four components, namely dispatcher, store, action and view, that together forms an unidirectional data flow architecture. Flux brought benifits such as improve data consistency and better debugging and testability.

Flux is in public archive since May 2023 and many alternative libraries are recommended, where Redux and Zustand are the two most popular ones and both utilize the flux model.

Atomic Model​

Atomic model uses atoms, essentially units of state that components can subscribe to, to share states among components. Recoil and Jotai are two most popular libraries that adopt this model.

Discussion on the difference between Jotai and Recoil can be read here.

Proxy Model​

Proxy model adopt proxy pattern and built-in JavaScript object Proxy to support state mangement. Mobx and Valtio are two libraries that adopt the model.

Signal Model​

Signals is a state management library released by Preact in Sep. 2022. However, it's mechanism, quoting Dan Abramov's comment, overrides React's public API and is based on fragile assumptions.

Deep Dive​

References​