React State Management Libraries
jotai, mobx, recoil, redux, and zustand are all JavaScript libraries designed to manage application state in React applications, but they use fundamentally different approaches. redux enforces a unidirectional data flow with immutable state and reducer functions. mobx uses observable objects and automatic dependency tracking for reactive updates. recoil models state as atoms and derived selectors within a global state graph. zustand provides a hook-based store with minimal boilerplate and no context providers. jotai offers a lightweight, atom-based approach inspired by Recoil but without requiring a root provider, enabling fine-grained reactivity and composability.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
State Management in React: Jotai, MobX, Recoil, Redux, and Zustand Compared
Choosing a state management library for React can feel overwhelming — especially when you have five solid options that all solve similar problems but with very different philosophies. Each of these libraries (jotai, mobx, recoil, redux, zustand) has matured into a production-ready tool, but they differ significantly in how they model state, handle updates, and integrate with React’s rendering model. Let’s compare them head-to-head using real-world engineering concerns.
🧠 Core Mental Model: How Each Library Thinks About State
redux treats state as a single, immutable object tree. All changes happen through pure functions called reducers, triggered by actions. This enforces predictability but adds boilerplate.
// redux: single store, actions, reducers
const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'increment':
return { ...state, count: state.count + 1 };
default:
return state;
}
}
// Dispatching
store.dispatch({ type: 'increment' });
mobx uses observable objects and automatically tracks which components depend on which pieces of state. Changes to observables trigger re-renders of only the affected components.
// mobx: observable class
import { makeAutoObservable } from 'mobx';
class Counter {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
}
const store = new Counter();
// In component: useObserver(() => <div>{store.count}</div>)
recoil models state as atoms (shared state units) and selectors (derived state). It integrates tightly with React’s concurrent features and uses a global state graph.
// recoil: atoms and selectors
import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';
const countAtom = atom({ key: 'count', default: 0 });
const doubledCount = selector({
key: 'doubledCount',
get: ({ get }) => get(countAtom) * 2
});
// In component
const [count, setCount] = useRecoilState(countAtom);
const double = useRecoilValue(doubledCount);
zustand gives you a single hook that wraps a store created via a factory function. The store holds state and actions together, and components subscribe only to the slices they use.
// zustand: create store with state + actions
import { create } from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 }))
}));
// In component
const { count, increment } = useStore();
jotai is inspired by Recoil but uses a more minimal API. Atoms are standalone units of state, and you compose them with hooks. No global provider needed.
// jotai: primitive atoms
import { atom, useAtom } from 'jotai';
const countAtom = atom(0);
const doubledCountAtom = atom((get) => get(countAtom) * 2);
// In component
const [count, setCount] = useAtom(countAtom);
const double = useAtomValue(doubledCountAtom);
🔌 Integration with React: Hooks, Context, and Re-renders
All five libraries work with React hooks, but their update granularity varies.
redux: By default, the entire app re-renders on any state change unless you useReact.memooruseSelectorwith equality checks. Modern Redux Toolkit simplifies this withcreateSliceand automatic memoization inuseSelector.
// redux with RTK
const count = useSelector(state => state.counter.count);
// Only re-renders if count changes (shallow equality by default)
mobx: Uses fine-grained reactivity. Only components that read an observable will re-render when it changes. Requires wrapping components inobserver()(or usinguseObserver).
// mobx observer component
const CounterDisplay = observer(() => <div>{store.count}</div>);
-
recoil: Automatically subscribes components to the atoms/selectors they use. Very granular updates — changing one atom won’t affect unrelated components. -
zustand: Selectors let you pull only the state you need. If you destructure inside the hook, you’ll re-render on any store change — so always use selector functions.
// zustand: avoid unnecessary re-renders
const count = useStore(state => state.count); // ✅ good
const { count } = useStore(); // ❌ bad — re-renders on any change
jotai: Similar to Recoil — eachuseAtomcall creates a subscription to that specific atom. Extremely fine-grained.
📦 Middleware, DevTools, and Ecosystem
redux shines here. It has the richest ecosystem: Redux DevTools (time-travel debugging), middleware like redux-thunk or redux-saga for async logic, and strong TypeScript support out of the box.
// redux middleware example
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(loggerMiddleware)
});
mobx offers mobx-react-lite for React integration and mobx-state-tree for more structured state modeling. DevTools exist but aren’t as mature as Redux’s.
recoil has experimental async support via selectorFamily and persistence utilities, but no official middleware system. DevTools are community-driven.
zustand supports middleware (like persist for localStorage) via store enhancers:
import { persist } from 'zustand/middleware';
const useStore = create(persist(
(set) => ({ /* ... */ }),
{ name: 'my-store' }
));
jotai has official utils for async, persistence, and derived state (atomWithStorage, atomWithQuery), and works well with React Suspense.
🔄 Async and Side Effects
redux: Requires middleware (thunk,saga,observable) to handle async logic.mobx: Just write async methods in your store classes — mutations happen directly.recoil: Use async selectors oruseRecoilCallbackfor side effects.zustand: Async actions are just async functions in your store.jotai: Built-in support viaatom(async (get) => ...), integrates with Suspense.
// jotai async atom
const userAtom = atom(async (get) => {
const res = await fetch('/api/user');
return res.json();
});
// Component will suspend until data loads
const user = useAtomValue(userAtom);
🧩 When to Reach for Which?
For large teams or complex apps needing strict predictability → Redux
If you need time-travel debugging, strict serialization, or a well-documented pattern that scales across dozens of developers, Redux (especially with Redux Toolkit) remains the gold standard. The learning curve pays off in maintainability.
For OOP fans who want direct mutation → MobX
If you’re comfortable with classes and prefer writing this.count++ instead of dispatching actions, MobX feels natural. Just remember to wrap components in observer and avoid anti-patterns like reading observables outside tracked contexts.
For fine-grained state with React integration → Recoil
Recoil is ideal if you’re building a highly interactive UI (like a design tool or dashboard) where many small pieces of state update independently. Its atom/selector model maps well to complex dependency graphs.
For simplicity and minimal setup → Zustand
Zustand removes the need for context providers and gives you a clean, hook-based API. It’s perfect for medium-sized apps where you want global state without ceremony. Just be careful with selector usage to avoid extra renders.
For lightweight, composable atoms → Jotai
Jotai is Recoil’s minimalist cousin. If you like atoms but don’t want a global <RecoilRoot>, Jotai’s zero-boilerplate approach is compelling. It’s especially strong when combined with React Suspense for data fetching.
⚠️ Important Notes on Maintenance
As of 2024:
- Recoil is in maintenance mode. The React team recommends considering alternatives like Jotai or Zustand for new projects.
- Redux, MobX, Zustand, and Jotai are all actively maintained with regular releases.
🛑 Avoid starting new projects with Recoil unless you have a strong legacy reason. The official docs now suggest evaluating other libraries.
📊 Summary Table
| Library | State Model | Update Granularity | Async Support | Provider Needed? | Learning Curve |
|---|---|---|---|---|---|
redux | Single immutable tree | Medium (with selectors) | Via middleware | No (RTK) | Steep |
mobx | Observable objects | Fine-grained | Direct in methods | No | Moderate |
recoil | Atoms + selectors | Fine-grained | Async selectors | Yes (<RecoilRoot>) | Moderate |
zustand | Hook-based store | Slice-based | Native async | No | Gentle |
jotai | Composable atoms | Fine-grained | Built-in + Suspense | No | Gentle |
💡 Final Thought
There’s no “best” library — only the best fit for your team and project.
- Need auditability and dev tools? → Redux
- Prefer direct mutation and OOP? → MobX
- Building a complex interactive UI and okay with maintenance mode? → Recoil (but consider Jotai instead)
- Want something simple, hook-based, and scalable? → Zustand
- Like atoms, no provider, and Suspense? → Jotai
Pick the model that matches how your team thinks about data flow — not just the one with the most GitHub stars.
How to Choose: redux vs jotai vs mobx vs recoil vs zustand
- redux:
Choose
redux(preferably with Redux Toolkit) if you need strict predictability, time-travel debugging, middleware support, and a battle-tested solution for large-scale applications. It’s best for teams that prioritize explicit state transitions, strong TypeScript support, and a rich ecosystem, even at the cost of some initial boilerplate. - jotai:
Choose
jotaiif you want a minimal, atom-based state management solution that integrates seamlessly with React hooks and Suspense, without requiring a global provider. It’s ideal for projects that value composability, fine-grained updates, and a lightweight footprint, especially when building interactive UIs that benefit from derived state and async atoms. - mobx:
Choose
mobxif your team prefers an object-oriented approach with direct state mutation and automatic reactivity. It’s well-suited for applications where developers are comfortable managing observable classes and want fine-grained re-renders without boilerplate, though it requires careful adherence to reactivity rules to avoid bugs. - recoil:
Avoid
recoilfor new projects — it is officially in maintenance mode as of 2024. While it offers powerful atom-based state management with fine-grained updates, the React team recommends evaluating alternatives like Jotai or Zustand. Only consider it if you’re maintaining an existing Recoil codebase or have specific legacy requirements. - zustand:
Choose
zustandif you want a simple, hook-centric global state solution with zero boilerplate and no context providers. It’s perfect for medium-sized apps where you need shared state across components without complexity, as long as you use selector functions to prevent unnecessary re-renders.
Popular Comparisons
README for redux
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
You can use Redux together with React, or with any other view library. The Redux core is tiny (2kB, including dependencies), and has a rich ecosystem of addons.
Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
Installation
Create a React Redux App
The recommended way to start new apps with React and Redux Toolkit is by using our official Redux Toolkit + TS template for Vite, or by creating a new Next.js project using Next's with-redux template.
Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.
# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app
We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:
- https://github.com/rahsheen/react-native-template-redux-typescript
- https://github.com/rahsheen/expo-template-redux-typescript
npm install @reduxjs/toolkit react-redux
For the Redux core library by itself:
npm install redux
For more details, see the Installation docs page.
Documentation
The Redux core docs are located at https://redux.js.org, and include the full Redux tutorials, as well usage guides on general Redux patterns:
The Redux Toolkit docs are available at https://redux-toolkit.js.org, including API references and usage guides for all of the APIs included in Redux Toolkit.
Learn Redux
Redux Essentials Tutorial
The Redux Essentials tutorial is a "top-down" tutorial that teaches "how to use Redux the right way", using our latest recommended APIs and best practices. We recommend starting there.
Redux Fundamentals Tutorial
The Redux Fundamentals tutorial is a "bottom-up" tutorial that teaches "how Redux works" from first principles and without any abstractions, and why standard Redux usage patterns exist.
Help and Discussion
The #redux channel of the Reactiflux Discord community is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - please come and join us there!
Before Proceeding Further
Redux is a valuable tool for organizing your state, but you should also consider whether it's appropriate for your situation. Please don't use Redux just because someone said you should - instead, please take some time to understand the potential benefits and tradeoffs of using it.
Here are some suggestions on when it makes sense to use Redux:
- You have reasonable amounts of data changing over time
- You need a single source of truth for your state
- You find that keeping all your state in a top-level component is no longer sufficient
Yes, these guidelines are subjective and vague, but this is for a good reason. The point at which you should integrate Redux into your application is different for every user and different for every application.
For more thoughts on how Redux is meant to be used, please see:
Basic Example
The whole global state of your app is stored in an object tree inside a single store. The only way to change the state tree is to create an action, an object describing what happened, and dispatch it to the store. To specify how state gets updated in response to an action, you write pure reducer functions that calculate a new state based on the old state and the action.
Redux Toolkit simplifies the process of writing Redux logic and setting up the store. With Redux Toolkit, the basic app logic looks like:
import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
incremented: state => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state.value += 1
},
decremented: state => {
state.value -= 1
}
}
})
export const { incremented, decremented } = counterSlice.actions
const store = configureStore({
reducer: counterSlice.reducer
})
// Can still subscribe to the store
store.subscribe(() => console.log(store.getState()))
// Still pass action objects to `dispatch`, but they're created for us
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}
Redux Toolkit allows us to write shorter logic that's easier to read, while still following the original core Redux behavior and data flow.
Logo
You can find the official logo on GitHub.
Change Log
This project adheres to Semantic Versioning. Every release, along with the migration instructions, is documented on the GitHub Releases page.