Modern State Management in React: Redux Toolkit vs. Zustand

Majd Muhtaseb10/06/20257 minutes

Introduction

State management is crucial for building complex React applications. While React's built-in useState and useContext hooks are sufficient for smaller projects, larger applications often benefit from dedicated state management libraries. This article compares two popular choices: Redux Toolkit and Zustand.

Redux Toolkit

Redux Toolkit simplifies Redux development by providing a set of tools and conventions that reduce boilerplate code. It includes configureStore, createSlice, and createAsyncThunk to streamline common Redux patterns.

Example:

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

// Component.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default Counter;

Zustand

Zustand is a small, fast, and unopinionated state management library. It emphasizes simplicity and minimal boilerplate. It uses a functional approach to state updates.

Example:

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))


function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

Comparison

| Feature | Redux Toolkit | Zustand | |-------------------|----------------------------------------------------|---------------------------------------------| | Boilerplate | Reduced compared to Redux, but still present | Minimal | | Learning Curve | Moderate | Low | | Size | Larger | Smaller | | Ecosystem | Extensive (Redux ecosystem) | Growing | | Debugging | Redux DevTools | Zustand Devtools (optional) | | Immutability | Enforced via Immer | Encouraged, not enforced by default | | Async Actions | Built-in support via createAsyncThunk | Requires middleware or custom implementation |

Conclusion

Both Redux Toolkit and Zustand are excellent choices for React state management. Redux Toolkit is a good option if you're already familiar with Redux or need its extensive ecosystem. Zustand excels in its simplicity and ease of use, making it a great choice for smaller to medium-sized projects or when you want to avoid the complexities of Redux. Choose the library that best fits your project's requirements and your team's preferences.