State Management Libraries for React Comparison
redux vs react-redux vs zustand vs react-query vs mobx-react-lite vs jotai vs mobx-react vs recoil
1 Year
reduxreact-reduxzustandreact-querymobx-react-litejotaimobx-reactrecoilSimilar Packages:
What's State Management Libraries for React?

State management libraries are essential tools in React applications for managing the state of components and ensuring data consistency across the application. These libraries provide various approaches to state management, from centralized stores to local state management, enabling developers to choose the best solution for their specific use cases. The choice of a state management library can significantly impact the architecture, performance, and maintainability of a React application.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
redux10,858,84460,936290 kB39a year agoMIT
react-redux8,270,48323,403823 kB265 days agoMIT
zustand4,878,44648,63888.8 kB411 days agoMIT
react-query1,418,08642,9432.26 MB1022 years agoMIT
mobx-react-lite1,404,45027,617423 kB644 days agoMIT
jotai1,109,35418,954438 kB825 days agoMIT
mobx-react1,062,20327,617650 kB644 days agoMIT
recoil522,84719,6292.21 MB3252 years agoMIT
Feature Comparison: redux vs react-redux vs zustand vs react-query vs mobx-react-lite vs jotai vs mobx-react vs recoil

State Management Approach

  • redux:

    Redux is a predictable state container for JavaScript applications, emphasizing a single source of truth for application state. It uses a strict unidirectional data flow and requires actions and reducers to manage state changes, which can lead to more predictable and testable code.

  • react-redux:

    React-Redux provides bindings for using Redux with React, allowing for a predictable state container that centralizes application state. It uses a unidirectional data flow and enables components to subscribe to specific pieces of state, promoting better separation of concerns.

  • zustand:

    Zustand is a small, fast state management solution that uses hooks for managing state in React. It allows for simple and flexible state management without the boilerplate of Redux, making it ideal for smaller applications or those that require a straightforward state management solution.

  • react-query:

    React Query is designed for fetching, caching, and synchronizing server state in React applications. It abstracts away the complexities of managing server state, providing hooks for data fetching, caching, and automatic updates, making it ideal for applications that rely heavily on remote data.

  • mobx-react-lite:

    MobX-React-Lite is a lightweight version of MobX-React, optimized for functional components. It provides hooks for using MobX with React's functional components, making it easier to manage state in modern React applications without class components.

  • jotai:

    Jotai uses an atomic state management approach, allowing developers to create independent pieces of state that can be composed together. This promotes better performance and reactivity, as components only re-render when the specific atoms they depend on change.

  • mobx-react:

    MobX-React integrates MobX's reactive state management with React components, providing a simple and intuitive way to manage state through observables and reactions. It allows for automatic updates of components when the underlying state changes, reducing boilerplate code.

  • recoil:

    Recoil offers a flexible state management solution that integrates seamlessly with React. It allows for both global and local state management, enabling developers to create derived state and manage asynchronous queries easily, making it suitable for complex applications.

Learning Curve

  • redux:

    Redux has a steep learning curve, as it introduces several concepts such as actions, reducers, and middleware. Understanding these concepts is essential for effectively using Redux in applications.

  • react-redux:

    React-Redux has a steeper learning curve due to the complexity of Redux's concepts like actions, reducers, and middleware. However, it provides a robust structure for larger applications once mastered.

  • zustand:

    Zustand is designed to be simple and easy to use, making it accessible for developers of all skill levels. Its minimal API allows for quick onboarding and implementation.

  • react-query:

    React Query has a straightforward API that is easy to learn, especially for developers familiar with asynchronous data fetching. Its hooks-based approach allows for quick integration into existing applications.

  • mobx-react-lite:

    MobX-React-Lite is easier to learn for those already familiar with functional components and hooks, as it leverages these modern React features, making it accessible for new developers.

  • jotai:

    Jotai has a gentle learning curve, especially for developers familiar with React Hooks. Its atomic model simplifies state management, making it easy to grasp for newcomers.

  • mobx-react:

    MobX-React has a moderate learning curve, as it requires understanding MobX's concepts of observables and reactions. However, once understood, it can significantly simplify state management in React applications.

  • recoil:

    Recoil's learning curve is relatively low, particularly for those familiar with React. Its API is intuitive, allowing developers to manage both local and global state with ease.

Performance

  • redux:

    Redux can face performance challenges due to its strict unidirectional data flow and the need for components to re-render when the global state changes. However, careful structuring and memoization can mitigate these issues.

  • react-redux:

    React-Redux promotes performance through its efficient subscription model, allowing components to subscribe to only the slices of state they need, reducing re-renders and improving responsiveness.

  • zustand:

    Zustand offers high performance with a minimalistic approach, allowing for direct state updates without the overhead of complex state management patterns, making it suitable for performance-critical applications.

  • react-query:

    React Query excels in performance by caching server responses and minimizing unnecessary network requests. It intelligently refetches data based on user interactions and application state, ensuring a smooth user experience.

  • mobx-react-lite:

    MobX-React-Lite enhances performance in functional components by leveraging hooks and optimizing reactivity, ensuring that only components that depend on changed observables re-render.

  • jotai:

    Jotai's atomic state management ensures optimal performance by allowing components to re-render only when the specific atoms they depend on change, reducing unnecessary renders.

  • mobx-react:

    MobX-React optimizes performance through its reactive programming model, where components automatically update in response to state changes, minimizing re-renders and improving efficiency.

  • recoil:

    Recoil provides excellent performance by allowing components to subscribe to specific atoms and selectors, ensuring that only affected components re-render when state changes occur.

Extensibility

  • redux:

    Redux is highly extensible through middleware, allowing developers to add custom functionality to the store, such as handling asynchronous actions or logging state changes.

  • react-redux:

    React-Redux is extensible through middleware and enhancers, allowing developers to add custom functionality to the Redux store, such as logging, crash reporting, or asynchronous actions.

  • zustand:

    Zustand is designed to be extensible with a simple API, allowing developers to create custom stores and hooks that fit their application's needs.

  • react-query:

    React Query is extensible with custom hooks and query functions, allowing developers to tailor data fetching and caching strategies to their specific application requirements.

  • mobx-react-lite:

    MobX-React-Lite allows for extensibility through hooks, enabling developers to create custom hooks that leverage MobX's reactivity in functional components.

  • jotai:

    Jotai is highly extensible, allowing developers to create custom atoms and hooks, making it easy to adapt to various application needs and integrate with other libraries.

  • mobx-react:

    MobX-React is extensible through MobX's powerful API, enabling developers to create custom decorators and utilities that enhance the state management experience.

  • recoil:

    Recoil's architecture supports extensibility through custom atoms and selectors, enabling developers to create complex state management solutions tailored to their applications.

How to Choose: redux vs react-redux vs zustand vs react-query vs mobx-react-lite vs jotai vs mobx-react vs recoil
  • jotai:

    Choose Jotai if you prefer a minimalistic and atomic approach to state management, allowing for fine-grained reactivity and easy integration with React's concurrent features.

README for redux

Redux Logo

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.

GitHub Workflow Status npm version npm downloads redux channel on discord

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.

License

MIT