State Management and Data Fetching Solutions for React Applications
jotai, mobx-react-lite, recoil, redux, and zustand are state management libraries designed to handle client-side application state in React, each with distinct models for defining, updating, and subscribing to state changes. react-query (now known as @tanstack/react-query) is fundamentally different — it specializes in server-state management, handling data fetching, caching, synchronization, and background updates for remote data. While the others focus on local UI or application state, react-query treats server data as a first-class citizen, reducing the need to manually store API responses in global state.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
State Management & Data Fetching in React: Jotai vs MobX vs React Query vs Recoil vs Redux vs Zustand
Managing state in React apps isn’t one-size-fits-all. Some libraries handle local UI state, others manage server data, and a few blur the lines. Let’s compare how each package approaches core challenges — with real code examples.
🧠 Core Philosophy: Mutable vs Immutable vs Server-Centric
redux enforces immutable state with explicit actions and reducers. Every change must go through a pure function.
// redux (with Redux Toolkit)
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1; // Immer allows "mutable" syntax
}
}
});
mobx-react-lite embraces mutable state. You mark objects as observable, and MobX tracks changes automatically.
// mobx-react-lite
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';
class CounterStore {
count = 0;
constructor() { makeAutoObservable(this); }
increment() { this.count++; }
}
const store = new CounterStore();
const Counter = observer(() => <div>{store.count}</div>);
zustand, jotai, and recoil use immutable updates but expose simpler APIs. They treat state as a black box updated via setters.
// zustand
import { create } from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 }))
}));
// jotai
import { atom, useAtom } from 'jotai';
const countAtom = atom(0);
const Counter = () => {
const [count, setCount] = useAtom(countAtom);
return <div onClick={() => setCount(c => c + 1)}>{count}</div>;
};
// recoil
import { atom, useRecoilState } from 'recoil';
const countAtom = atom({ key: 'count', default: 0 });
const Counter = () => {
const [count, setCount] = useRecoilState(countAtom);
return <div onClick={() => setCount(c => c + 1)}>{count}</div>;
};
react-query doesn’t manage local state at all. It focuses on server state: fetching, caching, and synchronizing data from APIs.
// react-query
import { useQuery, useMutation } from '@tanstack/react-query';
const UserProfile = ({ userId }) => {
const { data, isLoading } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUser(userId)
});
const mutation = useMutation({
mutationFn: updateUser,
onSuccess: () => queryClient.invalidateQueries(['user', userId])
});
if (isLoading) return <div>Loading...</div>;
return <div>{data.name}</div>;
};
📦 Setup & Boilerplate: How Much Code Do You Write?
redux requires the most setup: store configuration, slices, and often a provider wrapper.
// redux setup
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({ reducer: { counter: counterReducer } });
// In App.js
<Provider store={store}><Counter /></Provider>
mobx-react-lite needs class or object stores and observer on every component.
// mobx setup
// No provider needed, but every component must be observer()
zustand needs no provider — just call the hook anywhere.
// zustand usage
const count = useStore(state => state.count);
jotai and recoil also avoid top-level providers in basic usage, though recoil recommends <RecoilRoot> for advanced features.
// jotai: no provider needed for basic atoms
// recoil: <RecoilRoot> required in app root
react-query requires a QueryClient and QueryClientProvider.
// react-query setup
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<UserProfile userId={1} />
</QueryClientProvider>
);
}
🔁 Derived State: Computing from Existing State
redux uses reselect or RTK’s createSelector.
// redux derived state
import { createSelector } from '@reduxjs/toolkit';
const selectCount = (state) => state.counter.value;
const selectIsEven = createSelector(
[selectCount],
(count) => count % 2 === 0
);
mobx-react-lite uses computed getters.
// mobx computed
get isEven() { return this.count % 2 === 0; }
zustand computes inline or via subscribeWithSelector middleware.
// zustand derived
const isEven = useStore(state => state.count % 2 === 0);
jotai and recoil have first-class derived atoms/selectors.
// jotai derived
const isEvenAtom = atom((get) => get(countAtom) % 2 === 0);
// recoil derived
const isEvenSelector = selector({
key: 'isEven',
get: ({ get }) => get(countAtom) % 2 === 0
});
react-query doesn’t handle derived local state — pair it with another library.
🌐 Async Data: Fetching, Caching, and Mutations
Only react-query is built for this. The others require manual integration with useEffect or custom logic.
// Without react-query (e.g., in zustand)
const useStore = create((set) => ({
user: null,
fetchUser: async (id) => {
const user = await api.getUser(id);
set({ user });
}
}));
// With react-query
const { data } = useQuery({ queryKey: ['user', id], queryFn: () => api.getUser(id) });
react-query handles:
- Automatic refetching on window focus
- Stale-while-revalidate caching
- Pagination and infinite queries
- Optimistic updates and rollback
None of the local state managers do this out of the box.
🚀 Performance: Re-rendering and Granularity
mobx-react-lite and react-query offer the finest granularity — only components using changed observables or query keys re-render.
redux can cause unnecessary re-renders without React.memo or proper selector usage.
zustand lets you subscribe to specific state slices, avoiding full-store re-renders.
// zustand selective subscription
const count = useStore(state => state.count); // Only re-renders when count changes
jotai and recoil automatically optimize based on atom dependencies — if a component only reads countAtom, it won’t re-render when unrelated atoms change.
🔄 Server State vs Local State: A Critical Distinction
This is the biggest architectural decision:
- Use
react-query(or similar like SWR) for server state: anything from an API, database, or external service. - Use
zustand,jotai,redux, etc. for local state: UI toggles, form inputs, client-only calculations.
Mixing server data into local state stores leads to cache invalidation bugs, stale data, and manual refetching logic. react-query solves this by treating server state as ephemeral and managed externally.
🧪 Testing and Debugging
redux has the best tooling: Redux DevTools let you inspect every action, rewind state, and export logs.
mobx-react-lite works with MobX DevTools for tracking observables.
recoil offers a DevTools extension for time-travel debugging.
zustand and jotai rely on standard React DevTools — simpler but less powerful.
react-query includes a DevTools panel showing query status, cache, and mutations.
📌 When to Combine Libraries
It’s common — and recommended — to combine react-query with a local state manager:
- Use
react-queryfor user profiles, posts, products, etc. - Use
zustandorjotaifor theme settings, modal visibility, or form drafts.
Example combo:
// Global store for UI state
const useUIStore = create((set) => ({
darkMode: false,
toggleDarkMode: () => set(state => ({ darkMode: !state.darkMode }))
}));
// Server data via react-query
const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser });
⚠️ Maintenance and Ecosystem Notes
reduxis mature, stable, and widely adopted. Redux Toolkit is the modern standard.mobx-react-liteis actively maintained and pairs with MobX 6+.react-query(TanStack Query) is under active development with v5+ releases.recoilis still usable but has seen reduced activity from Meta; evaluate long-term support.jotaiandzustandare actively developed with strong community adoption.
🆚 Summary Table
| Library | Best For | Provider Needed? | Async Built-in? | Granular Updates | Learning Curve |
|---|---|---|---|---|---|
redux | Predictable, debuggable state | Yes | No | With selectors | Medium |
mobx-react-lite | Mutable OOP state | No | No | Yes | Medium |
zustand | Simple, hook-based global state | No | No | Yes (slices) | Low |
jotai | Atomic, composable state | No (basic) | No | Yes | Low-Medium |
recoil | React-native atoms/selectors | Recommended | No | Yes | Medium |
react-query | Server data fetching & caching | Yes | Yes | Yes | Low-Medium |
💡 Final Guidance
- Building a data-heavy app with lots of APIs? Start with
react-query+zustand. - Need strict state audit trails or middleware? Go with
redux. - Prefer writing mutable classes?
mobx-react-litefits naturally. - Want minimal setup with atomic thinking?
jotaiis elegant and scalable. - Working on a new project and unsure?
zustandis the safest, simplest default for local state.
Remember: server state is not your state. Let react-query handle the network, and keep your local state focused on the UI.
How to Choose: zustand vs redux vs mobx-react-lite vs react-query vs recoil vs jotai
- zustand:
Choose
zustandfor a lightweight, hook-based store that avoids provider wrappers and works out of the box with SSR. It’s perfect for medium-sized apps needing a single source of truth without Redux’s ceremony, offering direct state access, middleware support, and easy persistence integration. Its simplicity makes it a strong default choice for many teams. - redux:
Choose
reduxif you need strict predictability, time-travel debugging, middleware extensibility (like Redux Toolkit), or are working in a large codebase where explicit state transitions and dev tools are critical. Modern Redux withcreateSlicereduces boilerplate significantly, but it still requires more setup than newer alternatives. - mobx-react-lite:
Choose
mobx-react-liteif your team already uses MobX or prefers mutable state with automatic reactivity. It works best when you have domain models that naturally fit observable objects and want fine-grained updates without manual selector definitions. Note that it requires usingobserveron components and careful structuring to avoid performance pitfalls. - react-query:
Choose
react-querywhen your app heavily relies on asynchronous data from APIs. It eliminates manual cache management, provides built-in features like background refetching, pagination, and mutations, and ensures your UI stays in sync with server state. Avoid using it for local UI state — pair it with a local state manager instead. - recoil:
Choose
recoilif you want a React-native feel with atoms and selectors that support async dependencies and time-travel debugging. It’s well-suited for apps needing derived state with complex dependencies or concurrent rendering compatibility. However, note that its development pace has slowed, and adoption in new projects should consider long-term maintenance. - jotai:
Choose
jotaiif you want a minimal, atomic model that scales from simple to complex state without boilerplate. It’s ideal when you prefer composing small, independent pieces of state (atoms) and deriving values via pure functions (selectors), all while leveraging React’s reactivity natively. Its zero-config setup and TypeScript support make it great for teams valuing simplicity and composability.
Popular Comparisons
README for zustand
A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.
Don't disregard it because it's cute. It has quite the claws, lots of time was spent dealing with common pitfalls, like the dreaded zombie child problem, react concurrency, and context loss between mixed renderers. It may be the one state-manager in the React space that gets all of these right.
You can try a live demo and read the docs.
npm install zustand
:warning: This readme is written for JavaScript users. If you are a TypeScript user, be sure to check out our TypeScript Usage section.
First create a store
Your store is a hook! You can put anything in it: primitives, objects, functions. State has to be updated immutably and the set function merges state to help it.
import { create } from 'zustand'
const useBearStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
Then bind your components, and that's it!
Use the hook anywhere, no providers are needed. Select your state and the component will re-render on changes.
function BearCounter() {
const bears = useBearStore((state) => state.bears)
return <h1>{bears} around here ...</h1>
}
function Controls() {
const increasePopulation = useBearStore((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}
Why zustand over redux?
- Simple and un-opinionated
- Makes hooks the primary means of consuming state
- Doesn't wrap your app in context providers
- Can inform components transiently (without causing render)
Why zustand over context?
- Less boilerplate
- Renders components only on changes
- Centralized, action-based state management
Recipes
Fetching everything
You can, but bear in mind that it will cause the component to update on every state change!
const state = useBearStore()
Selecting multiple state slices
It detects changes with strict-equality (old === new) by default, this is efficient for atomic state picks.
const nuts = useBearStore((state) => state.nuts)
const honey = useBearStore((state) => state.honey)
If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can use useShallow to prevent unnecessary rerenders when the selector output does not change according to shallow equal.
import { create } from 'zustand'
import { useShallow } from 'zustand/react/shallow'
const useBearStore = create((set) => ({
nuts: 0,
honey: 0,
treats: {},
// ...
}))
// Object pick, re-renders the component when either state.nuts or state.honey change
const { nuts, honey } = useBearStore(
useShallow((state) => ({ nuts: state.nuts, honey: state.honey })),
)
// Array pick, re-renders the component when either state.nuts or state.honey change
const [nuts, honey] = useBearStore(
useShallow((state) => [state.nuts, state.honey]),
)
// Mapped picks, re-renders the component when state.treats changes in order, count or keys
const treats = useBearStore(useShallow((state) => Object.keys(state.treats)))
For more control over re-rendering, you may provide any custom equality function (this example requires the use of createWithEqualityFn).
const treats = useBearStore(
(state) => state.treats,
(oldTreats, newTreats) => compare(oldTreats, newTreats),
)
Overwriting state
The set function has a second argument, false by default. Instead of merging, it will replace the state model. Be careful not to wipe out parts you rely on, like actions.
const useFishStore = create((set) => ({
salmon: 1,
tuna: 2,
deleteEverything: () => set({}, true), // clears the entire store, actions included
deleteTuna: () => set(({ tuna, ...rest }) => rest, true),
}))
Async actions
Just call set when you're ready, zustand doesn't care if your actions are async or not.
const useFishStore = create((set) => ({
fishies: {},
fetch: async (pond) => {
const response = await fetch(pond)
set({ fishies: await response.json() })
},
}))
Read from state in actions
set allows fn-updates set(state => result), but you still have access to state outside of it through get.
const useSoundStore = create((set, get) => ({
sound: 'grunt',
action: () => {
const sound = get().sound
...
Reading/writing state and reacting to changes outside of components
Sometimes you need to access state in a non-reactive way or act upon the store. For these cases, the resulting hook has utility functions attached to its prototype.
:warning: This technique is not recommended for adding state in React Server Components (typically in Next.js 13 and above). It can lead to unexpected bugs and privacy issues for your users. For more details, see #2200.
const useDogStore = create(() => ({ paw: true, snout: true, fur: true }))
// Getting non-reactive fresh state
const paw = useDogStore.getState().paw
// Listening to all changes, fires synchronously on every change
const unsub1 = useDogStore.subscribe(console.log)
// Updating state, will trigger listeners
useDogStore.setState({ paw: false })
// Unsubscribe listeners
unsub1()
// You can of course use the hook as you always would
function Component() {
const paw = useDogStore((state) => state.paw)
...
Using subscribe with selector
If you need to subscribe with a selector,
subscribeWithSelector middleware will help.
With this middleware subscribe accepts an additional signature:
subscribe(selector, callback, options?: { equalityFn, fireImmediately }): Unsubscribe
import { subscribeWithSelector } from 'zustand/middleware'
const useDogStore = create(
subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })),
)
// Listening to selected changes, in this case when "paw" changes
const unsub2 = useDogStore.subscribe((state) => state.paw, console.log)
// Subscribe also exposes the previous value
const unsub3 = useDogStore.subscribe(
(state) => state.paw,
(paw, previousPaw) => console.log(paw, previousPaw),
)
// Subscribe also supports an optional equality function
const unsub4 = useDogStore.subscribe(
(state) => [state.paw, state.fur],
console.log,
{ equalityFn: shallow },
)
// Subscribe and fire immediately
const unsub5 = useDogStore.subscribe((state) => state.paw, console.log, {
fireImmediately: true,
})
Using zustand without React
Zustand core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the API utilities.
import { createStore } from 'zustand/vanilla'
const store = createStore((set) => ...)
const { getState, setState, subscribe, getInitialState } = store
export default store
You can use a vanilla store with useStore hook available since v4.
import { useStore } from 'zustand'
import { vanillaStore } from './vanillaStore'
const useBoundStore = (selector) => useStore(vanillaStore, selector)
:warning: Note that middlewares that modify set or get are not applied to getState and setState.
Transient updates (for often occurring state-changes)
The subscribe function allows components to bind to a state-portion without forcing re-render on changes. Best combine it with useEffect for automatic unsubscribe on unmount. This can make a drastic performance impact when you are allowed to mutate the view directly.
const useScratchStore = create((set) => ({ scratches: 0, ... }))
const Component = () => {
// Fetch initial state
const scratchRef = useRef(useScratchStore.getState().scratches)
// Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
useEffect(() => useScratchStore.subscribe(
state => (scratchRef.current = state.scratches)
), [])
...
Sick of reducers and changing nested states? Use Immer!
Reducing nested structures is tiresome. Have you tried immer?
import { produce } from 'immer'
const useLushStore = create((set) => ({
lush: { forest: { contains: { a: 'bear' } } },
clearForest: () =>
set(
produce((state) => {
state.lush.forest.contains = null
}),
),
}))
const clearForest = useLushStore((state) => state.clearForest)
clearForest()
Alternatively, there are some other solutions.
Persist middleware
You can persist your store's data using any kind of storage.
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
const useFishStore = create(
persist(
(set, get) => ({
fishes: 0,
addAFish: () => set({ fishes: get().fishes + 1 }),
}),
{
name: 'food-storage', // name of the item in the storage (must be unique)
storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
},
),
)
See the full documentation for this middleware.
Immer middleware
Immer is available as middleware too.
import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
const useBeeStore = create(
immer((set) => ({
bees: 0,
addBees: (by) =>
set((state) => {
state.bees += by
}),
})),
)
Can't live without redux-like reducers and action types?
const types = { increase: 'INCREASE', decrease: 'DECREASE' }
const reducer = (state, { type, by = 1 }) => {
switch (type) {
case types.increase:
return { grumpiness: state.grumpiness + by }
case types.decrease:
return { grumpiness: state.grumpiness - by }
}
}
const useGrumpyStore = create((set) => ({
grumpiness: 0,
dispatch: (args) => set((state) => reducer(state, args)),
}))
const dispatch = useGrumpyStore((state) => state.dispatch)
dispatch({ type: types.increase, by: 2 })
Or, just use our redux-middleware. It wires up your main-reducer, sets the initial state, and adds a dispatch function to the state itself and the vanilla API.
import { redux } from 'zustand/middleware'
const useGrumpyStore = create(redux(reducer, initialState))
Redux devtools
Install the Redux DevTools Chrome extension to use the devtools middleware.
import { devtools } from 'zustand/middleware'
// Usage with a plain action store, it will log actions as "setState"
const usePlainStore = create(devtools((set) => ...))
// Usage with a redux store, it will log full action types
const useReduxStore = create(devtools(redux(reducer, initialState)))
One redux devtools connection for multiple stores
import { devtools } from 'zustand/middleware'
// Usage with a plain action store, it will log actions as "setState"
const usePlainStore1 = create(devtools((set) => ..., { name, store: storeName1 }))
const usePlainStore2 = create(devtools((set) => ..., { name, store: storeName2 }))
// Usage with a redux store, it will log full action types
const useReduxStore1 = create(devtools(redux(reducer, initialState)), { name, store: storeName3 })
const useReduxStore2 = create(devtools(redux(reducer, initialState)), { name, store: storeName4 })
Assigning different connection names will separate stores in redux devtools. This also helps group different stores into separate redux devtools connections.
devtools takes the store function as its first argument, optionally you can name the store or configure serialize options with a second argument.
Name store: devtools(..., {name: "MyStore"}), which will create a separate instance named "MyStore" in the devtools.
Serialize options: devtools(..., { serialize: { options: true } }).
Logging Actions
devtools will only log actions from each separated store unlike in a typical combined reducers redux store. See an approach to combining stores https://github.com/pmndrs/zustand/issues/163
You can log a specific action type for each set function by passing a third parameter:
const useBearStore = create(devtools((set) => ({
...
eatFish: () => set(
(prev) => ({ fishes: prev.fishes > 1 ? prev.fishes - 1 : 0 }),
undefined,
'bear/eatFish'
),
...
You can also log the action's type along with its payload:
...
addFishes: (count) => set(
(prev) => ({ fishes: prev.fishes + count }),
undefined,
{ type: 'bear/addFishes', count, }
),
...
If an action type is not provided, it is defaulted to "anonymous". You can customize this default value by providing an anonymousActionType parameter:
devtools(..., { anonymousActionType: 'unknown', ... })
If you wish to disable devtools (on production for instance). You can customize this setting by providing the enabled parameter:
devtools(..., { enabled: false, ... })
React context
The store created with create doesn't require context providers. In some cases, you may want to use contexts for dependency injection or if you want to initialize your store with props from a component. Because the normal store is a hook, passing it as a normal context value may violate the rules of hooks.
The recommended method available since v4 is to use the vanilla store.
import { createContext, useContext } from 'react'
import { createStore, useStore } from 'zustand'
const store = createStore(...) // vanilla store without hooks
const StoreContext = createContext()
const App = () => (
<StoreContext.Provider value={store}>
...
</StoreContext.Provider>
)
const Component = () => {
const store = useContext(StoreContext)
const slice = useStore(store, selector)
...
TypeScript Usage
Basic typescript usage doesn't require anything special except for writing create<State>()(...) instead of create(...)...
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
import type {} from '@redux-devtools/extension' // required for devtools typing
interface BearState {
bears: number
increase: (by: number) => void
}
const useBearStore = create<BearState>()(
devtools(
persist(
(set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
}),
{
name: 'bear-storage',
},
),
),
)
A more detailed TypeScript guide is here and there.
Best practices
- You may wonder how to organize your code for better maintenance: Splitting the store into separate slices.
- Recommended usage for this unopinionated library: Flux inspired practice.
- Calling actions outside a React event handler in pre-React 18.
- Testing
- For more, have a look in the docs folder
Third-Party Libraries
Some users may want to extend Zustand's feature set which can be done using third-party libraries made by the community. For information regarding third-party libraries with Zustand, visit the doc.