Need advice about which tool to choose?Ask the StackShare community!

Redux

30.2K
23K
+ 1
674
Zustand

227
142
+ 1
34
Add tool

Redux vs Zustand: What are the differences?

Redux and Zustand are state management libraries for JavaScript applications but they differ in design and usage. Let's explore the key differences between Redux and Zustand:

  1. Conceptual Approach: Redux follows a centralized and predictable state management approach. It enforces a strict unidirectional data flow and uses a single global state store, known as the Redux store, to manage application state. Zustand, on the other hand, follows a decentralized state management approach. It allows multiple isolated stores to manage different parts of the application state independently.

  2. Complexity and Boilerplate: Redux is known for its robust ecosystem and extensive set of middleware and tooling. However, it requires more boilerplate code to set up and manage the store, actions, and reducers. Zustand, on the other hand, aims to reduce complexity and boilerplate. It provides a simplified API and requires fewer code constructs to define and use stores, actions, and selectors.

  3. Immutability: Redux encourages immutable updates to the state by creating new copies of the state objects. Zustand, on the other hand, embraces mutable updates by allowing direct modifications to the state. It leverages JavaScript proxies to track state changes efficiently, providing a simpler and more flexible approach to state updates.

  4. Performance and React Integration: Redux is highly optimized for performance and works well with React applications. It uses a diffing algorithm to efficiently update the DOM based on state changes. Zustand also provides excellent performance, as it leverages React's built-in state management capabilities, such as React's context and useState hook. Zustand integrates seamlessly with React components, making it easy to use within React applications.

  5. Middleware and DevTools: Redux has a wide range of middleware options, such as redux-thunk and redux-saga, which allow for advanced state management and asynchronous actions. It also provides powerful DevTools. Zustand, on the other hand, offers a simpler middleware approach through its built-in middleware system. While it may not have as extensive a middleware ecosystem as Redux, it provides a lightweight and straightforward solution. Zustand also has its own DevTools extension for debugging and inspecting store state.

  6. Community and Ecosystem: Redux has a large and mature ecosystem with abundant community support, extensive documentation, and numerous third-party libraries and integrations. It is widely adopted and has a thriving ecosystem of middleware, tooling, and developer resources. Zustand, although newer, has gained popularity for its simplicity and lightweight nature. While its ecosystem may not be as extensive as Redux, it has an active community and growing support.

In summary, Redux and Zustand are state management libraries for JavaScript applications, each with its own design principles and trade-offs. Redux follows a centralized and predictable approach, while Zustand embraces a decentralized and simpler approach.

Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Redux
Pros of Zustand
  • 191
    State is predictable
  • 150
    Plays well with React and others
  • 126
    State stored in a single object tree
  • 79
    Hot reloading out of the box
  • 74
    Allows for time travel
  • 14
    You can log everything
  • 12
    Great tutorial direct from the creator
  • 7
    Endorsed by the creator of Flux
  • 7
    Test without browser
  • 6
    Easy to debug
  • 3
    Enforces one-way data flow
  • 3
    Granular updates
  • 2
    Blabla
  • 10
    Simple API
  • 7
    Unopinionated
  • 5
    Asynchronous action out the box
  • 4
    Supports Redux DevTools
  • 3
    Less boilerplate
  • 3
    Open source
  • 2
    LIghtweight

Sign up to add or upvote prosMake informed product decisions

Cons of Redux
Cons of Zustand
  • 13
    Lots of boilerplate
  • 6
    Verbose
  • 5
    Steep learning curve
  • 5
    Design
  • 4
    Steeper learning curve than RxJs
  • 4
    Steeper learning curve than MobX
  • 2
    Requires function component

Sign up to add or upvote consMake informed product decisions

What is Redux?

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. t provides a great experience, such as live code editing combined with a time traveling debugger.

What is Zustand?

Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.

Need advice about which tool to choose?Ask the StackShare community!

Jobs that mention Redux and Zustand as a desired skillset
What companies use Redux?
What companies use Zustand?
See which teams inside your own company are using Redux or Zustand.
Sign up for StackShare EnterpriseLearn More

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with Redux?
What tools integrate with Zustand?

Sign up to get full access to all the tool integrationsMake informed product decisions

Blog Posts

JavaScriptGitHubReact+12
5
4149
Oct 11 2019 at 2:36PM

LogRocket

JavaScriptReactAngularJS+8
5
1981
JavaScriptGitHubNode.js+29
14
13510
GitHubPythonReact+42
49
40799
GitHubPythonNode.js+47
55
72462
What are some alternatives to Redux and Zustand?
Cycle.js
A functional and reactive JavaScript framework for predictable code
MobX
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Flux
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
React
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
RxJS
RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.
See all alternatives