Modern State Management in React

State management in React has evolved significantly over the years. Let's explore the modern approaches that are replacing Redux in many projects.

The Evolution of React State#

React's state management landscape has changed dramatically:

• 2015-2018: Redux dominated everything
• 2019-2020: Context API + useReducer became viable
• 2021-Present: Lightweight libraries like Zustand and Jotai

Zustand: Simple and Powerful#

Zustand is a minimalist state management library that's gaining massive popularity:

import { create } from 'zustand'
 
interface BearState {
  bears: number
  increase: () => void
  decrease: () => void
}
 
const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  decrease: () => set((state) => ({ bears: state.bears - 1 })),
}))
 
// In your component
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  const increase = useBearStore((state) => state.increase)
  
  return (
    <div>
      <h1>{bears} bears</h1>
      <button onClick={increase}>Add bear</button>
    </div>
  )
}

Jotai: Atomic State#

Jotai takes a different approach with atomic state primitives:

import { atom, useAtom } from 'jotai'
 
// Create atoms
const countAtom = atom(0)
const doubleCountAtom = atom((get) => get(countAtom) * 2)
 
// Use in components
function Counter() {
  const [count, setCount] = useAtom(countAtom)
  const [doubleCount] = useAtom(doubleCountAtom)
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {doubleCount}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  )
}

Comparing the Options#

When to Use What#

Choose Zustand when:

• You need a global store with actions
• You want Redux-like patterns without the boilerplate
• You need to access state outside React

Choose Jotai when:

• You prefer atomic/bottom-up state design
• You have lots of independent pieces of state
• You want automatic re-render optimization

Choose Redux Toolkit when:

• You have a large team familiar with Redux
• You need middleware for complex side effects
• Your app has very complex state logic

The Future: React's use() Hook#

React's upcoming use() hook will change how we handle async state:

// Future React code
function UserProfile({ userId }) {
  const user = use(fetchUser(userId))
  
  return <h1>{user.name}</h1>
}

This will work seamlessly with Suspense for data fetching, reducing the need for external state management in many cases.

Conclusion#

The React ecosystem has matured to offer excellent state management options beyond Redux. Whether you choose Zustand, Jotai, or stick with built-in solutions, the key is picking the right tool for your specific needs.

Start simple, and add complexity only when necessary!