State Management and Data Fetching Solutions for React Applications
jotai, mobx-react, mobx-react-lite, react-redux, recoil, redux, and zustand are state management libraries designed to handle application state in React, while react-query specializes in server state management, including data fetching, caching, and synchronization. These libraries address different aspects of state: some focus on local UI state, others on global state, and react-query specifically handles asynchronous server state with built-in caching, background updates, and optimistic updates.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
State Management & Data Fetching in React: A Deep Dive into 8 Key Libraries
Managing state in React apps isn’t one-size-fits-all. Some libraries handle local UI state, others global client state, and a few specialize in server state. Let’s compare how each of these eight packages tackles real-world problems.
🧠 Core Philosophy: How Each Library Thinks About State
redux treats state as a single, immutable tree. Every change requires a pure reducer function and an action object.
// redux
const increment = { type: 'INCREMENT' };
const counterReducer = (state = 0, action) => {
if (action.type === 'INCREMENT') return state + 1;
return state;
};
react-redux is just the React binding for Redux — it doesn’t manage state itself but connects Redux stores to components.
// react-redux
import { useSelector, useDispatch } from 'react-redux';
function Counter() {
const count = useSelector(state => state.counter);
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment)}>{count}</button>;
}
zustand uses a single store with direct setter functions. No actions, no reducers — just a hook that gives you state and setters.
// zustand
import { create } from 'zustand';
const useStore = create((set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 }))
}));
function Counter() {
const { count, inc } = useStore();
return <button onClick={inc}>{count}</button>;
}
jotai models state as “atoms” — tiny units of state that can be read, written, or derived. No provider needed.
// jotai
import { atom, useAtom } from 'jotai';
const countAtom = atom(0);
const Counter = () => {
const [count, setCount] = useAtom(countAtom);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
};
recoil also uses atoms and selectors, but requires a <RecoilRoot> provider at the top of your app.
// recoil
import { atom, useRecoilState } from 'recoil';
const countAtom = atom({ key: 'count', default: 0 });
const Counter = () => {
const [count, setCount] = useRecoilState(countAtom);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
};
mobx-react and mobx-react-lite rely on MobX’s observable state. You mutate state directly, and React components automatically re-render when observed values change.
// mobx-react-lite
import { observer } from 'mobx-react-lite';
import { makeAutoObservable } from 'mobx';
class Store {
count = 0;
constructor() { makeAutoObservable(this); }
inc = () => { this.count += 1; };
}
const store = new Store();
const Counter = observer(() => (
<button onClick={store.inc}>{store.count}</button>
));
react-query doesn’t manage client state — it manages server state. You define queries, and it handles fetching, caching, background updates, and more.
// react-query
import { useQuery } from '@tanstack/react-query';
function UserProfile({ userId }) {
const { data, isLoading } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUser(userId)
});
if (isLoading) return <div>Loading...</div>;
return <div>{data.name}</div>;
}
🔌 Setup Overhead: Providers, Stores, and Boilerplate
redux+react-redux: Requires creating a store, wrapping your app in<Provider>, defining actions/reducers, and connecting components.zustand: Zero providers. Just callcreate()and use the hook anywhere.jotai: No provider needed (unless using advanced features like persistence).recoil: Must wrap your app in<RecoilRoot>.mobx-react: Needs<Provider>if usinginject; otherwise, just pass stores via props or module imports.mobx-react-lite: No provider needed — just useobserveron components.react-query: Requires<QueryClientProvider>at the root, but that’s it.
📈 Performance: Re-render Behavior
All modern libraries avoid unnecessary re-renders, but they do it differently:
redux/react-redux: Components re-render only if the slice they select changes (thanks toshallowEqualby default).zustand: Uses a selector pattern — only re-renders if the selected state changes.jotaiandrecoil: Subscribe components only to the specific atoms they use.mobx-react-lite: Automatically tracks which observables a component uses and re-renders only when those change.react-query: Caching means components often get data instantly from cache, avoiding loading spinners and extra renders.
🔄 Async and Derived State
Need computed values or async data?
jotai supports async atoms and derived atoms natively:
// jotai async atom
const userAtom = atom(async (get) => {
const id = get(userIdAtom);
const res = await fetch(`/api/user/${id}`);
return res.json();
});
recoil uses selectors for derived state and async queries:
// recoil selector
const userNameSelector = selector({
key: 'userName',
get: async ({ get }) => {
const user = await fetchUser(get(userIdAtom));
return user.name;
}
});
mobx lets you create computed properties:
// mobx computed
class UserStore {
@observable users = [];
@computed get activeUsers() {
return this.users.filter(u => u.active);
}
}
react-query is built for async — it handles retries, stale-while-revalidate, pagination, and mutations out of the box.
redux typically needs middleware like redux-thunk or redux-saga for async logic, though Redux Toolkit simplifies this.
zustand can handle async in setters:
// zustand async
const useStore = create((set) => ({
user: null,
fetchUser: async (id) => {
const user = await api.getUser(id);
set({ user });
}
}));
⚠️ Important Notes on Maintenance and Use
mobx-reactincludes legacy APIs (Provider/inject) that are rarely needed in modern React. Prefermobx-react-litefor function components.recoildevelopment has significantly slowed since mid-2023, with Meta recommending alternatives like Jotai for new projects.reduxis not deprecated — but Redux Toolkit is now the standard way to use it, reducing boilerplate dramatically.react-query(now part of TanStack Query) is actively maintained and widely adopted for server state.
🤝 When to Combine Libraries
It’s common — and often smart — to use more than one:
- Use
react-queryfor server data +zustandorjotaifor client UI state. - Avoid using
reduxfor server state — that’s whatreact-queryis for. - Don’t mix
mobxandredux— they solve the same problem with opposite philosophies (mutable vs immutable).
📊 Summary Table
| Library | State Type | Provider Needed? | Async Built-in? | Best For |
|---|---|---|---|---|
redux | Global client | Yes (via react-redux) | No (needs middleware) | Large apps needing strict predictability |
react-redux | React binding only | Yes | No | Connecting Redux to React |
zustand | Global client | No | Yes (in setters) | Simple, hook-based global state |
jotai | Atomic client | No | Yes | Fine-grained, modern state without providers |
recoil | Atomic client | Yes | Yes | Large apps with complex derived state (use cautiously) |
mobx-react | Observable client | Optional | Yes (via reactions) | Legacy class-component apps |
mobx-react-lite | Observable client | No | Yes | Modern MobX apps with function components |
react-query | Server | Yes | Yes | Any app that fetches data from APIs |
💡 Final Guidance
- For server data: Always start with
react-query. It solves problems you didn’t know you had (stale data, background refetching, etc.). - For simple client state:
zustandorjotaiwill save you hours of boilerplate. - For complex enterprise apps with audit needs:
redux+ Redux Toolkit still shines. - For reactive, mutable state lovers:
mobx-react-liteis clean and powerful. - Avoid
recoilfor new greenfield projects unless you have a strong reason — its future is uncertain.
The best architecture often uses two tools: one for server state (react-query) and one for client state (zustand, jotai, or redux). Trying to force everything into one system usually leads to pain.
How to Choose: redux vs jotai vs mobx-react vs mobx-react-lite vs react-query vs react-redux vs recoil vs zustand
- redux:
Choose
reduxif you need a predictable, centralized store with strict immutability, middleware support, and time-travel debugging. It’s best paired with Redux Toolkit to reduce boilerplate. Suitable for complex applications requiring strong state consistency, auditability, and large-scale team coordination. - jotai:
Choose
jotaiif you want a minimal, atomic state model inspired by Recoil but without the need for a root provider. It integrates well with Concurrent React and supports derived atoms and async atoms out of the box. Ideal for teams seeking a lightweight, modern alternative to Redux or Context API with less boilerplate. - mobx-react:
Choose
mobx-reactif you're already using MobX for state management and need full integration with class components and legacy React patterns. However, note that this package is heavier thanmobx-react-liteand includes features likeProviderandinjectthat are unnecessary for most modern function component-based apps. - mobx-react-lite:
Choose
mobx-react-liteif you're using MobX with function components and hooks. It provides the essentialobserverHOC anduseLocalObservablehook without the overhead of legacy APIs. Best for projects that benefit from MobX’s mutable, reactive programming model and automatic tracking. - react-query:
Choose
react-querywhen your app heavily relies on server data — fetching, caching, background updates, pagination, mutations, and more. It eliminates the need to manually manage loading states, refetching logic, or cache invalidation. Essential for data-intensive applications with complex server interactions. - react-redux:
Choose
react-reduxif you're using Redux and need official, optimized bindings for React. It provides hooks likeuseSelectoranduseDispatchand ensures efficient re-renders. Use it when your team values Redux’s strict unidirectional data flow, middleware ecosystem (like Redux Toolkit), and dev tools. - recoil:
Choose
recoilif you prefer a fine-grained, atom-based state model with selectors for derived state and built-in async support. It avoids global re-renders by subscribing components only to the atoms they use. Best for large apps where performance and state composition are critical, though development has slowed since 2023. - zustand:
Choose
zustandif you want a simple, hook-based global state solution without providers or context. It uses a single store with direct mutation support (via immer-style updates) and avoids re-rendering unrelated components. Great for small to medium apps or teams tired of Redux boilerplate.
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.