State Management and Data Fetching Solutions for React Applications
immer, mobx, react-query, recoil, redux, valtio, xstate, and zustand are libraries that address different aspects of application state in JavaScript frontend applications. While redux, zustand, recoil, valtio, and mobx focus on managing local or global client-side state with varying models (immutable, mutable, proxy-based, etc.), react-query specializes in server-state management—handling data fetching, caching, synchronization, and background updates. immer enables immutable updates through mutable syntax, often used to simplify reducer logic in libraries like Redux. xstate takes a fundamentally different approach by modeling application logic as finite state machines and statecharts, which is especially useful for complex workflows with well-defined transitions.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
State Management Deep Dive: Immer, MobX, React Query, Recoil, Redux, Valtio, XState, and Zustand
Modern React applications demand thoughtful strategies for handling both client-side state (UI interactions, form data, preferences) and server-side state (API responses, cached data). The eight libraries compared here solve overlapping but distinct problems. Let’s examine how they differ in philosophy, API design, and real-world usage.
🧠 Core Philosophy: Immutable vs Mutable vs Server-State vs State Machines
Each library approaches state differently:
- Immutable:
redux(withimmer), enforces state snapshots. - Mutable + Reactive:
mobx,valtio, allow direct mutation with automatic reactivity. - Server-State Focused:
react-querytreats remote data as a first-class citizen. - Atom-Based:
recoildecomposes state into fine-grained units. - Hook-Centric Global Store:
zustanduses a single store with hooks. - Formal State Modeling:
xstateuses finite state machines.
Let’s see how this plays out in code.
✍️ Writing State Updates: Syntax and Mental Model
immer: Mutate to Create Immutable Copies
import produce from 'immer';
const nextState = produce(baseState, draft => {
draft.user.name = 'Alice'; // Looks like mutation
draft.todos.push({ id: 3, text: 'Learn immer' });
});
// nextState is a new immutable object
mobx: Direct Mutation with Observables
import { makeAutoObservable } from 'mobx';
class Store {
user = { name: 'Bob' };
todos = [];
constructor() {
makeAutoObservable(this);
}
addUser(name) {
this.user.name = name; // Actual mutation
}
}
redux (with Redux Toolkit): Immer Under the Hood
import { createSlice } from '@reduxjs/toolkit';
const slice = createSlice({
name: 'app',
initialState: { user: { name: 'Charlie' }, todos: [] },
reducers: {
setName: (state, action) => {
state.user.name = action.payload; // Uses immer internally
}
}
});
valtio: Proxy-Based Mutable State
import { proxy, useSnapshot } from 'valtio';
const state = proxy({ user: { name: 'Dana' }, todos: [] });
// In component
const snap = useSnapshot(state);
state.user.name = 'Eve'; // Mutate directly
zustand: Hook-Based Store with Setters
import { create } from 'zustand';
const useStore = create(set => ({
user: { name: 'Frank' },
todos: [],
setName: name => set(state => ({ user: { ...state.user, name } }))
}));
// In component
const { user, setName } = useStore();
recoil: Atoms and Selectors
import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';
const userAtom = atom({ key: 'user', default: { name: 'Grace' } });
const userNameSelector = selector({
key: 'userName',
get: ({ get }) => get(userAtom).name
});
// In component
const [user, setUser] = useRecoilState(userAtom);
const name = useRecoilValue(userNameSelector);
xstate: State Machines with Transitions
import { createMachine, interpret } from 'xstate';
const toggleMachine = createMachine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: { on: { TOGGLE: 'active' } },
active: { on: { TOGGLE: 'inactive' } }
}
});
const service = interpret(toggleMachine).start();
service.send('TOGGLE');
react-query: Server State via Hooks
import { useQuery, useMutation } from '@tanstack/react-query';
// Fetching
const { data, isLoading } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUser(userId)
});
// Mutating
const { mutate } = useMutation({
mutationFn: updateUser,
onSuccess: () => queryClient.invalidateQueries(['user', userId])
});
🔁 Reactivity and Re-renders: How Components Update
redux/zustand: Components re-render only when selected parts of state change (viauseSelectororuseStore(selector)).mobx/valtio: Automatic fine-grained reactivity—only components using changed properties re-render.recoil: Atom subscriptions trigger re-renders only for components reading that atom or derived selector.react-query: Components update when query status changes (loading → success) or data becomes stale.xstate: Components subscribe to state changes; only update when relevant state nodes change.immer: Not a React integration layer—it just produces new state objects.
📦 Architecture and Boilerplate
| Library | Setup Complexity | Boilerplate | Learning Curve |
|---|---|---|---|
immer | Low | None | Low |
mobx | Medium | Low | Medium |
react-query | Low | Low | Low–Medium |
recoil | Medium | Medium | Medium |
redux | High | High* | High |
valtio | Very Low | Very Low | Low |
xstate | Medium | Medium | High |
zustand | Very Low | Very Low | Low |
* Redux Toolkit significantly reduces Redux boilerplate.
🔄 Combining Client and Server State
Most apps need both. A common pattern:
- Use
react-queryfor all data from APIs. - Use
zustand,valtio, orreduxfor UI state (e.g., modal open/closed, form inputs).
Example combo:
// Server state
const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser });
// Client state
const { darkMode, toggleDarkMode } = useThemeStore();
Avoid storing server data in client-state stores—that leads to cache invalidation bugs and missed optimizations like background refetching.
⚠️ Maintenance and Ecosystem Signals
As of 2024:
recoilis in maintenance mode; Meta recommends evaluating alternatives like React Context or Zustand for new projects.reduxremains actively maintained via Redux Toolkit, which is the official recommended approach.mobx,zustand,valtio,xstate, andreact-queryare all under active development with stable APIs.
🛠️ When to Use Which: Decision Guide
Use react-query if:
- You’re fetching data from APIs.
- You want automatic caching, retries, and background updates.
Use zustand or valtio if:
- You need simple global state without providers or complex setup.
- Your team prefers minimal abstractions.
Use redux (with Redux Toolkit) if:
- You need time-travel debugging or middleware like Redux Saga.
- Your organization has existing Redux infrastructure.
Use mobx if:
- Your team likes OOP and reactive programming.
- You have complex computed values that benefit from automatic dependency tracking.
Use xstate if:
- Your feature has clear states and transitions (e.g., payment flow, game logic).
- You want to eliminate impossible states through design.
Use immer if:
- You’re writing Redux reducers and hate nested spread operators.
- You need immutable updates in a non-Redux context.
Avoid recoil in new projects unless:
- You have a large existing investment.
- You specifically need its atom/selector model and accept the maintenance risk.
💡 Final Thought
There’s no one-size-fits-all. Most modern apps combine react-query for server state and a lightweight client-state solution like zustand or valtio. Reserve redux for complex enterprise needs, xstate for intricate workflows, and mobx for teams that thrive in reactive paradigms. Always match the tool to the problem—not the hype.
How to Choose: zustand vs immer vs mobx vs react-query vs recoil vs redux vs valtio vs xstate
- zustand:
Choose
zustandwhen you want a lightweight, hook-based global state solution with minimal boilerplate, no context providers, and excellent performance due to selective re-rendering. It’s perfect for most React apps needing shared state without Redux’s ceremony. It supports middleware, persisting, and async actions out of the box. Avoid it only if you require strict immutability enforcement or deep integration with Redux-specific tooling. - immer:
Choose
immerwhen you need to simplify immutable state updates in a reducer-based architecture like Redux. It lets you write code that looks like it’s mutating state while preserving immutability under the hood, reducing boilerplate and cognitive load. It’s not a full state management solution on its own but pairs well with others. Avoid using it if your project already uses a mutable or proxy-based state model that doesn’t require immutability. - mobx:
Choose
mobxwhen you prefer a reactive, mutable state model with automatic dependency tracking. It’s ideal for teams comfortable with object-oriented patterns and who want minimal boilerplate for observable state and computed values. Use it when your app has complex interdependent state that benefits from fine-grained reactivity without manual selector optimization. Avoid it if you strictly require predictable, time-travel-debuggable state changes or work in environments where immutability is non-negotiable. - react-query:
Choose
react-querywhen your application relies heavily on server data—fetching, caching, synchronizing, and updating it. It eliminates manual cache management, provides built-in stale-while-revalidate behavior, and handles background refetching, pagination, and mutations out of the box. It should be your default for any data coming from APIs. Do not use it for managing UI or client-only state; pair it with a client-state library instead. - recoil:
Choose
recoilwhen you need a scalable, React-integrated state model based on atoms and selectors, especially in large codebases where state dependencies must be computed efficiently. It offers great dev tools and supports concurrent rendering. However, note that as of 2024, Meta has shifted focus away from Recoil toward React’s built-in features, so consider long-term maintenance before adopting it in new projects. - redux:
Choose
reduxwhen you need a battle-tested, predictable, centralized store with strong dev tooling, middleware support (like Redux Toolkit), and time-travel debugging. It’s best suited for large applications requiring strict state traceability, complex middleware pipelines, or integration with ecosystem tools like Redux Persist. Avoid it for simple apps where its boilerplate and learning curve outweigh its benefits—modern alternatives often suffice. - valtio:
Choose
valtiowhen you want a minimal, proxy-based state model that feels like working with plain JavaScript objects while automatically tracking changes and triggering React re-renders. It’s ideal for rapid prototyping or small-to-medium apps where simplicity and developer ergonomics matter more than strict architectural constraints. Pair it withreact-queryfor server state. Avoid it if you need advanced debugging or serialization guarantees that immutability provides. - xstate:
Choose
xstatewhen your application logic involves complex workflows with discrete states and well-defined transitions—such as onboarding flows, wizards, or device control interfaces. Its visualizer and formal state machine model prevent invalid states and make logic testable and self-documenting. Don’t use it for general-purpose state storage or simple UI toggles; it’s overkill unless your problem truly benefits from explicit state modeling.
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.