What State Management Library Should I Use with React?

React made UI a function of state, but managing that state has long been challenging. Redux became popular through the Flux pattern and often handled both interactive UI state and data fetched from APIs.

UI state covers interactions such as modals and theme settings, while server cache state stores API responses for reuse. Robinson points to SWR and React Query as tools built for server data, a distinct problem from UI state. He also explains that Context transports data between components; paired with hooks such as useState or useReducer, it can support state management.

State machines make possible states and transitions explicit; a stoplight, for example, moves from green to yellow to red. Robinson highlights XState’s visualizer for exploring transitions such as loading, success, failure, and retries. For complex interfaces such as Figma, performance may require specialized approaches, but he recommends starting with React or JavaScript and adding a library when a clear need arises.

Direct mutation can be convenient but carries risk, while immutable updates can require more boilerplate. Immer lets developers write changes against a draft and produces an immutable next state. Robinson also shows how URL state preserves filters across refreshes and makes them shareable, using Amazon and Nomad List as examples.

A large Context provider can cause many nested components to rerender when its value changes, so developers may use memoization to reduce unnecessary work. Robinson discusses a proposed useSelectedContext hook as a possible future optimization. His recommendations depend on project size, experience, and learning goals, with SWR or React Query suggested for server cache state.