State Management Comparison 2026: Redux, Zustand, Jotai & More

// Context creation
import { createContext, useContext, useState } from 'react'

const ThemeContext = createContext()

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

export function useTheme() {
  const context = useContext(ThemeContext)
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider')
  }
  return context
}

// Usage
function App() {
  return (
    <ThemeProvider>
      <Header />
      <Main />
    </ThemeProvider>
  )
}

function Header() {
  const { theme, setTheme } = useTheme()
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme
    </button>
  )
}

// Pros: Built-in, no dependencies, simple
// Cons: Re-renders all consumers, not ideal for complex state

// 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
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

// App.js
import { Provider, useDispatch, useSelector } from 'react-redux'
import { store, increment, decrement } from './store'

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  )
}

function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  )
}

// Async with createAsyncThunk
import { createAsyncThunk } from '@reduxjs/toolkit'

export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async () => {
    const response = await fetch('/api/users')
    return response.json()
  }
)

const usersSlice = createSlice({
  name: 'users',
  initialState: { data: [], loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false
        state.data = action.payload
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = false
        state.error = action.error.message
      })
  }
})

// Pros: Powerful ecosystem, great dev tools, middleware support
// Cons: More boilerplate, steeper learning curve

// store.js
import { create } from 'zustand'

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

// Usage
function Counter() {
  const { count, increment, decrement, reset } = useStore()
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

// With TypeScript
interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
}

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

// Slices for larger stores
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

const useStore = create(
  devtools(
    persist(
      (set) => ({
        bears: 0,
        increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
        removeAllBears: () => set({ bears: 0 })
      }),
      { name: 'bear-storage' }
    )
  )
)

// Async actions
const useUserStore = create((set) => ({
  user: null,
  loading: false,
  error: null,
  fetchUser: async (id) => {
    set({ loading: true })
    try {
      const response = await fetch(`/api/users/${id}`)
      const user = await response.json()
      set({ user, loading: false })
    } catch (error) {
      set({ error: error.message, loading: false })
    }
  }
}))

// Pros: Simple API, minimal boilerplate, TypeScript support
// Cons: Smaller ecosystem, less mature than Redux

// atoms.js
import { atom, useAtom } from 'jotai'

// Primitive atom
const countAtom = atom(0)

// Derived atom
const doubleCountAtom = atom((get) => get(countAtom) * 2)

// Write-only atom
const incrementAtom = atom(null, (get, set) => {
  set(countAtom, get(countAtom) + 1)
})

// Read-write atom
const textAtom = atom('hello')
const uppercaseAtom = atom(
  (get) => get(textAtom).toUpperCase(),
  (get, set, newValue) => {
    set(textAtom, newValue.toLowerCase())
  }
)

// Usage
function Counter() {
  const [count, setCount] = useAtom(countAtom)
  const [doubleCount] = useAtom(doubleCountAtom)
  const [increment] = useAtom(incrementAtom)
  
  return (
    <div>
      <span>{count}</span>
      <span>{doubleCount}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

// Async atoms
const userAtom = atom(async (get) => {
  const response = await fetch('/api/user')
  return response.json()
})

// With loading state
const userAtom = atom(
  async (get) => {
    const response = await fetch('/api/user')
    return response.json()
  }
)

const userStatusAtom = atom((get) => {
  try {
    get(userAtom)
    return 'loaded'
  } catch {
    return 'loading'
  }
})

// Pros: Atomic state, flexible, minimal re-renders
// Cons: Different mental model, smaller community

// atoms.js
import { atom, selector, useRecoilState, useRecoilValue } from 'recoil'

// State atom
const textState = atom({
  key: 'textState',
  default: '',
})

// Derived selector
const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState)
    return text.length
  }
})

// Async selector
const userState = atom({
  key: 'userState',
  default: selector({
    key: 'userState/default',
    get: async () => {
      const response = await fetch('/api/user')
      return response.json()
    }
  })
})

// Usage
function TextInput() {
  const [text, setText] = useRecoilState(textState)
  
  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  )
}

function CharacterCount() {
  const count = useRecoilValue(charCountState)
  return <div>Character count: {count}</div>
}

// Effects
import { useEffect } from 'react'
import { atom, useSetRecoilState } from 'recoil'

const localStorageEffect = (key) => ({ setSelf, onSet }) => {
  const savedValue = localStorage.getItem(key)
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue))
  }
  
  onSet((newValue, _, isReset) => {
    isReset
      ? localStorage.removeItem(key)
      : localStorage.setItem(key, JSON.stringify(newValue))
  })
}

const persistedAtom = atom({
  key: 'persistedAtom',
  default: 0,
  effects: [localStorageEffect('persistedAtom')]
})

// Pros: React-like API, selectors, async support
// Cons: Facebook maintenance, larger bundle size