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: jotai vs mobx-react vs mobx-react-lite vs react-query vs react-redux vs recoil vs redux vs zustand
- 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. - 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. - 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 jotai
visit jotai.org or npm i jotai
Jotai scales from a simple useState replacement to an enterprise TypeScript application.
- Minimal core API (2kb)
- Many utilities and extensions
- No string keys (compared to Recoil)
First, create a primitive atom
An atom represents a piece of state. All you need is to specify an initial value, which can be primitive values like strings and numbers, objects, and arrays. You can create as many primitive atoms as you want.
import { atom } from 'jotai'
const countAtom = atom(0)
const countryAtom = atom('Japan')
const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])
const mangaAtom = atom({ 'Dragon Ball': 1984, 'One Piece': 1997, Naruto: 1999 })
Use the atom in your components
It can be used like React.useState:
import { useAtom } from 'jotai'
function Counter() {
const [count, setCount] = useAtom(countAtom)
return (
<h1>
{count}
<button onClick={() => setCount((c) => c + 1)}>one up</button>
...
Create derived atoms with computed values
A new read-only atom can be created from existing atoms by passing a read
function as the first argument. get allows you to fetch the contextual value
of any atom.
const doubledCountAtom = atom((get) => get(countAtom) * 2)
function DoubleCounter() {
const [doubledCount] = useAtom(doubledCountAtom)
return <h2>{doubledCount}</h2>
}
Creating an atom from multiple atoms
You can combine multiple atoms to create a derived atom.
const count1 = atom(1)
const count2 = atom(2)
const count3 = atom(3)
const sum = atom((get) => get(count1) + get(count2) + get(count3))
Or if you like fp patterns ...
const atoms = [count1, count2, count3, ...otherAtoms]
const sum = atom((get) => atoms.map(get).reduce((acc, count) => acc + count))
Derived async atoms 
You can make the read function an async function too.
const urlAtom = atom('https://json.host.com')
const fetchUrlAtom = atom(async (get) => {
const response = await fetch(get(urlAtom))
return await response.json()
})
function Status() {
// Re-renders the component after urlAtom is changed and the async function above concludes
const [json] = useAtom(fetchUrlAtom)
...
You can create a writable derived atom
Specify a write function at the second argument. get will return the current
value of an atom. set will update the value of an atom.
const decrementCountAtom = atom(
(get) => get(countAtom),
(get, set, _arg) => set(countAtom, get(countAtom) - 1)
)
function Counter() {
const [count, decrement] = useAtom(decrementCountAtom)
return (
<h1>
{count}
<button onClick={decrement}>Decrease</button>
...
Write only derived atoms
Just do not define a read function.
const multiplyCountAtom = atom(null, (get, set, by) =>
set(countAtom, get(countAtom) * by),
)
function Controls() {
const [, multiply] = useAtom(multiplyCountAtom)
return <button onClick={() => multiply(3)}>triple</button>
}
Async actions
Just make the write function an async function and call set when you're ready.
const fetchCountAtom = atom(
(get) => get(countAtom),
async (_get, set, url) => {
const response = await fetch(url)
set(countAtom, (await response.json()).count)
}
)
function Controls() {
const [count, compute] = useAtom(fetchCountAtom)
return (
<button onClick={() => compute('http://count.host.com')}>compute</button>
...
Note about functional programming
Jotai's fluid interface is no accident — atoms are monads, just like promises! Monads are an established pattern for modular, pure, robust and understandable code which is optimized for change. Read more about Jotai and monads.