Rethinking State Management in 2024

State management in React has evolved significantly over the last few years. Gone are the days where a massive global store was the default solution for every problem.

The Problem with Global Stores

While libraries like Redux served us well, they often led to boilerplate-heavy codebases.

// The old way
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

Enter Atomic State

Tools like Jotai and Recoil introduced the concept of atoms—tiny, independent pieces of state that components can subscribe to.

1. Granular Updates: Only components using the specific atom re-render.
2. Simplicity: No providers (mostly), less boilerplate.
3. Composability: Derived atoms make computing state easy.

Server State Separation

The biggest shift, however, was realizing that server cache is not UI state. Libraries like React Query (TanStack Query) handle caching, deduplication, and invalidation out of the box.

By separating these concerns, we reduce our client-side complexity by nearly 50%.