Problem: There are many React state libraries, so it’s hard to choose...
Problem: There are many React state libraries, so it’s hard to choose between them.
Solution: Think in categories. Many are similar.
6 categories:
1. Route state (Tanstack router loaders, Next.js RSC fetch results) - Data is fetched and cached when a route loads.
2. Remote state (Tanstack query, swr, RTK Query, Apollo) - Data is fetched and cached when a component loads.
3. Atomic (Recoil, Jotai) - Mutable stores (called “atoms”) can be composed. Optimize renders via atom dependency (Jotai), or via string key (Recoil). State is inside React.
4. Unidirectional (Redux, Zustand) - Immutable store. Dispatch actions to change data. Optimize renders via selectors. State is outside React.
5. Proxy (Mobx, Valtio) - Mutable state. Wrap your state in a proxy, so renders are automatically optimized. Valtio uses a hook. Mobx uses an HOC. State is inside React.
6. State machine (XState) - Enforce state transition rules, and visualize state via state charts. State is outside React.
Key differences:
1. Is it a general state library, or specialized? Route state and remote state libraries focus on caching fetched / async data. The rest of the libraries are general.
2. Is state stored outside React? For example, Redux, Zustand, and XState store state outside React, so it can be accessed anywhere. Most other options store state inside React, so it's only accessible in React components and hooks.
3. How are renders optimized? Mobx and Valtio automatically optimize renders for performance. Other options have unique approaches. In Jotai, you optimize renders by depending on an atom. In Redux and Zustand, you optimize renders via selectors.
4. How many stores? In Redux, Tanstack Query, and RTK query, you have one store. In Recoil/Jotai, you have many.
5. How is state changed? In Redux/Zustand, state is immutable. You change it via dispatching actions. In Recoil/Jotai/Mobx/Valtio, state is mutable - you can change it directly. In XState, you use transitions and events.
6. How is state read? In remote and route state solutions, you fetch and cached data is automatically used if available. In Redux/Zustand, you read via selectors. In Mobx/Valtio, you read via a hook (Valtio) or HOC (Mobx). In Recoil/Jotai you read the atom.
React third-party state libraries ranked by downloads:
1. Redux
2. Apollo
3. Tanstack Query
4. swr
All the others are pretty close after that.
https://npmtrends.com/@apollo/client-vs-@tanstack/react-query-vs-@xstate/react-vs-jotai-vs-mobx-react-vs-mobx-state-tree-vs-react-redux-vs-recoil-vs-swr-vs-valtio
Found this thread useful? I'm writing a new course on this topic!
"React Third-Party State Playbook"
It will publish on Pluralsight later this year.
I welcome your feedback on other aspects I should consider. Thanks!