state-management Posts

Got a React app that’s growing fast and your props chain is getting out of hand? Time to pick a proper state manager.

Below we compare Redux, Zustand, Recoil, and Jotai across 12 key points so you can see which one clicks with your style.

1. Learning Curve

Redux has more concepts (actions, reducers, middleware) so it feels steeper.
Zustand is almost zero‑config: just create a store function and go.
Recoil sits in the middle: atoms & selectors are new but intuitive.
Jotai is super minimal, just atoms, so you onboard fast.

2. Boilerplate

Redux: slices, thunks, action creators.
Zustand: a few lines, no ceremony.
Recoil: you declare atoms & selectors, leaner than Redux but some setup.
Jotai: literally define atoms, that’s it.

3. DevTools

Redux: industry standard, time travel & action logging.
Zustand: simple plugin with state snapshots.
Recoil: official DevTools to inspect atoms & dependencies.
Jotai: community tools available, maturing fast.

4. Rendering Performance

Redux global store can trigger extra rerenders without memoization.
Zustand only rerenders components that use the changed slice.
Recoil subscribes only to read atoms, minimizing updates.
Jotai independent atoms avoid bulk re renders too.

5. Async Data

Redux uses thunks/sagas, powerful but verbose.
Zustand handles async inside store functions with ease.
Recoil async selectors let you fetch declaratively.
Jotai offers atomWithQuery/atomWithAsync for data fetching.

6. Server‑Side Rendering

Redux: hydrate initial state on the server.
Zustand: create a fresh store per request.
Recoil: snapshot & restore atoms during SSR.
Jotai: supports hydration via getInitialProps style APIs.

7. TypeScript

Redux Toolkit: first class TS support for actions & slices.
Zustand: good inference but complex nested types can be tricky.
Recoil: types for atoms/selectors can get verbose.
Jotai: minimal API keeps TS types simple.

8. Ecosystem & Plugins

Redux: mature ecosystem with endless middleware.
Zustand: growing community plugins for persistence, devtools, etc.
Recoil: backed by Meta with official persistence & utilities.
Jotai: modular atoms let you pick only what you need.

9. Debuggability

Redux: unmatched logging & time travel.
Zustand: basic logging via middleware.
Recoil: visualize atom graphs in DevTools.
Jotai: DIY logging or use community extensions.

10. Bundle Size

Redux + Toolkit: ~70 KB gzipped.
Zustand: ~2 KB gzipped.
Recoil: ~10 KB gzipped.
Jotai: ~1 KB gzipped.

11. Use‑Case Fit

Redux: massive apps with complex flows.
Zustand/Jotai: small to medium apps craving simplicity.
Recoil: declarative derived state & concurrent React.
Jotai: atomic graph style state, super modular.

12. Maturity & Adoption

Redux: battle tested in countless production apps.
Zustand & Jotai: rising stars used by modern startups.
Recoil: backed by Meta, still evolving but reliable.

// Zustand quickstart example
import { create } from 'zustand'

const useStore = create(set => ({
  todos: [],
  addTodo: text  => set(s => ({ todos: [...s.todos, { id: Date.now(), text }] })),
  removeTodo: id => set(s => ({ todos: s.todos.filter(t => t.id !== id) })),
  fetchTodos: async () => {
    const res  = await fetch('/api/todos')
    const data = await res.json()
    set({ todos: data })
  }
}))

function TodoApp(){
  const { todos, addTodo, removeTodo, fetchTodos } = useStore()
  React.useEffect(() => { fetchTodos() }, [fetchTodos])
  return (
    <div>
      <h1>My Todos</h1>
      <ul>
        {todos.map(t => (
          <li key={t.id}>
            {t.text} <button onClick={() => removeTodo(t.id)}>x</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addTodo(prompt('New todo?'))}>
        Add Todo
      </button>
    </div>
  )
}

Hope that helps you pick the perfect state solution for your next React gig!

Posts tagged with "state-management"

React State Management Face‑Off