redux-toolkit VS zustand

Redux is a predictable state management tool for JavaScript apps. A state is something that keeps the app running for example when you are asked to select gender in a website, the state is either male or female.

I said the wrong shape, because I think that, if redux-toolkit was the version people used a lot in the past, their views on redux would be different today. Being more positive, than it is.

So you can imagine how much more we'd need to write to introduce reducers and actions in a real-world application. This is where Redux ToolKit comes in very handy.

Redux Toolkit Documentation

Redux is rather overkill in today's front end ecosystem if you're building an MVP, and as of late more have been using redux-toolkit or useReducer to update slices of state.4

React 19 Async Features Boa v0.20 Rust-Powered Engine Safari 18.2 Developer Updates Redux Toolkit 2.5 Termo Civet Rockpack

RTK Query: A data-fetching and state management tool for making API requests to our backend.

To cut down the boilerplate, Redux provides a handy extension, popularly known as the Redux Toolkit, which is recommended for use in a React-Redux setup. We’ll cover the advantages of RTK and its utilities as we discuss the core concepts of Redux.

Redux Toolkit (RTK) is an abstraction built on top of Redux that simplifies its usage by reducing boilerplate and making common tasks easier. RTK provides convenient functions like createSlice for generating actions and reducers in one go, and createAsyncThunk for handling asynchronous logic (like API calls). It offers tools to manage state efficiently without having to manually set up actions, reducers, and middleware, streamlining the setup process for new Redux projects.

The modern way to write redux is through redux-toolkit as recommended by redux maintainers.

And here we come to Zustand.

Zustand: https://github.com/pmndrs/zustand

TanStack Query Zustand Jotai Context API

For client-side state, Zustand is the way to go. It's got zero boilerplate, a tiny bundle size, and a simple but powerful API that's easy to learn. You can create a store with just a few lines of code, which is pretty neat.

Zustand + Immer. I never used a state management tool because React context API was enough for me until I discovered Zustand last year. It's a simpler and straightforward alternative to Redux.

Zustand is a simple and easy-to-use state management library.

State Management with Zustand: Zustand offers a lightweight and intuitive approach to managing shared state, reducing the need for derived state or excessive memoization. It simplifies managing and updating global state without extra boilerplate.

The people behind Jotai also made Zustand and Valtio:

https://github.com/pmndrs/zustand

https://github.com/pmndrs/valtio

To me it feels like Jotai has too much manual boilerplate and Valtio has a lot of "magic" that while I do like it I don't feel like it would be a good idea for a team. Zustand sits right in the middle of boilerplate-vs-magic, and is what I chose for a large project we're doing now.

State Management: Zustand

📦 Package: zustand https://zustand-demo.pmnd.rs/ ⭐ Why You Should Try It: A small, fast, and flexible state management library that’s simpler than Redux. It works great with React.