Photo by Lautaro Andreani on Unsplash

Modern State Management Libraries for React: A Comparative Guide

Managing state in React applications has evolved significantly from simple local state to sophisticated libraries designed to handle asynchronous actions, side effects, and complex business logic. In this guide, we’ll explore some of the most popular modern state management solutions — including Redux Toolkit, Recoil, Zustand, XState, and MobX. We’ll discuss their pros and cons while presenting more realistic, TypeScript-powered examples to show how you can integrate asynchronous actions and error handling into your applications.

Whether you’re building a dynamic dashboard or an enterprise-grade web app, choosing the right state management tool can boost your productivity and maintainability. Let’s dive in!

1. Redux Toolkit

Overview

Redux Toolkit (RTK) has revamped the Redux experience by reducing boilerplate and introducing patterns for asynchronous actions with thunks. This example demonstrates a counter that can increment synchronously and also fetch an increment value asynchronously (simulating a network request).

Pros

• Robust Ecosystem: Extensive tooling and middleware support.
• Predictable State Updates: Enforces immutability with clear, traceable actions.
• Great for Large Apps: Excels in managing complex state logic.

Cons

• Learning Curve: Still requires understanding Redux fundamentals.
• Some Boilerplate: Even with RTK, initial setup can feel heavier than other solutions.

TypeScript Example

import React from 'react';
import { createSlice, configureStore, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

interface CounterState {
  value: number;
  loading: boolean;
  error?: string;
}

const initialState: CounterState = { value: 0, loading: false };

export const fetchIncrementValue = createAsyncThunk<number, void>(
  'counter/fetchIncrementValue',
  async () => {
    // Simulate an API call that returns an increment value after 1 second.
    const response = await new Promise<number>((resolve) => {
      setTimeout(() => resolve(5), 1000);
    });
    return response;
  }
);

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchIncrementValue.pending, (state) => {
      state.loading = true;
      state.error = undefined;
    });
    builder.addCase(fetchIncrementValue.fulfilled, (state, action: PayloadAction<number>) => {
      state.loading = false;
      state.value += action.payload;
    });
    builder.addCase(fetchIncrementValue.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
  },
});

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

function Counter() {
  const { value, loading, error } = useSelector((state: RootState) => state.counter);
  const dispatch = useDispatch<AppDispatch>();

  return (
    <div>
      <div style={{ marginBottom: '1rem' }}>
        <button onClick={() => dispatch(counterSlice.actions.decrement())} disabled={loading}>-</button>
        <span style={{ margin: '0 1rem' }}>{value}</span>
        <button onClick={() => dispatch(counterSlice.actions.increment())} disabled={loading}>+</button>
      </div>
      <div>
        <button onClick={() => dispatch(fetchIncrementValue())} disabled={loading}>
          {loading ? 'Loading...' : 'Fetch Increment'}
        </button>
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
    </div>
  );
}

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

2. Recoil

Overview

Recoil offers a more native React experience by allowing state to be co-located with components through atoms and selectors. This example uses a simple counter along with an asynchronous “fetch” operation, handled with React’s local state for managing loading and error states.

Pros

• Fine-Grained Control: Isolate state into small, reusable atoms.
• Intuitive API: Smooth learning curve if you’re already comfortable with React.
• Concurrent Mode Ready: Designed to integrate with future React features.

Cons

• Debugging Tools: Still maturing compared to Redux’s robust ecosystem.
• Smaller Ecosystem: Fewer third-party integrations.

TypeScript Example

import React from 'react';
import { atom, useRecoilState, RecoilRoot } from 'recoil';

const counterState = atom<number>({
  key: 'counterState',
  default: 0,
});

// Simulated asynchronous API call to fetch an increment value.
const fetchIncrementValue = (): Promise<number> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(5), 1000);
  });
};

function Counter() {
  const [count, setCount] = useRecoilState(counterState);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  
  const handleFetchIncrement = async () => {
    setLoading(true);
    setError(null);
    try {
      const increment = await fetchIncrementValue();
      setCount(count + increment);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <div style={{ marginBottom: '1rem' }}>
        <button onClick={() => setCount(count - 1)} disabled={loading}>-</button>
        <span style={{ margin: '0 1rem' }}>{count}</span>
        <button onClick={() => setCount(count + 1)} disabled={loading}>+</button>
      </div>
      <div>
        <button onClick={handleFetchIncrement} disabled={loading}>
          {loading ? 'Loading...' : 'Fetch Increment'}
        </button>
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
    </div>
  );
}

export default function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

3. Zustand

Overview

Zustand focuses on simplicity and minimalism with a hook-based API that avoids the need for providers. This example extends a simple counter to include an asynchronous operation that fetches an increment value while managing loading and error states.

Pros

• Minimal Boilerplate: No need for complex setups or context providers.
• Flexible & Performant: Optimized re-rendering with selective subscriptions.
• Simple API: Intuitive to integrate into projects of any size.

Cons

• Scalability: May require additional patterns for very large applications.
• Smaller Ecosystem: Fewer out-of-the-box extensions compared to Redux.

TypeScript Example

import React from 'react';
import create from 'zustand';

interface CounterStore {
  count: number;
  loading: boolean;
  error?: string;
  increment: () => void;
  decrement: () => void;
  fetchIncrement: () => Promise<void>;
}

const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  loading: false,
  error: undefined,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  fetchIncrement: async () => {
    set({ loading: true, error: undefined });
    try {
      const increment = await new Promise<number>((resolve) => {
        setTimeout(() => resolve(5), 1000);
      });
      set((state) => ({ count: state.count + increment, loading: false }));
    } catch (error: any) {
      set({ error: error.message, loading: false });
    }
  },
}));

function Counter() {
  const { count, loading, error, increment, decrement, fetchIncrement } = useCounterStore();
  
  return (
    <div>
      <div style={{ marginBottom: '1rem' }}>
        <button onClick={decrement} disabled={loading}>-</button>
        <span style={{ margin: '0 1rem' }}>{count}</span>
        <button onClick={increment} disabled={loading}>+</button>
      </div>
      <div>
        <button onClick={fetchIncrement} disabled={loading}>
          {loading ? 'Loading...' : 'Fetch Increment'}
        </button>
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
    </div>
  );
}

export default function App() {
  return <Counter />;
}

4. XState

Overview

XState leverages state machines to manage application state, making every transition explicit and testable. In this example, the machine is extended to handle asynchronous fetching, transitioning between “active”, “loading”, and “failure” states.

Pros

• Visual & Predictable: Easily visualize state transitions.
• Explicit Handling: Makes each state and transition clear.
• Ideal for Complex Logic: Perfect for workflows with non-trivial state transitions.

Cons

• Learning Curve: Requires understanding statecharts.
• Verbosity: Can be more verbose than other solutions.

TypeScript Example

import React from 'react';
import { createMachine, assign } from 'xstate';
import { useMachine } from '@xstate/react';

interface CounterContext {
  count: number;
  error?: string;
}

type CounterEvent = 
  | { type: 'INCREMENT' }
  | { type: 'DECREMENT' }
  | { type: 'FETCH' }
  | { type: 'RESOLVE'; value: number }
  | { type: 'REJECT'; error: string };

const counterMachine = createMachine<CounterContext, CounterEvent>({
  id: 'counter',
  initial: 'active',
  context: {
    count: 0,
  },
  states: {
    active: {
      on: {
        INCREMENT: { actions: 'increment' },
        DECREMENT: { actions: 'decrement' },
        FETCH: 'loading'
      }
    },
    loading: {
      invoke: {
        id: 'fetchIncrement',
        src: () => new Promise<number>((resolve, reject) => {
          setTimeout(() => resolve(5), 1000);
        }),
        onDone: {
          target: 'active',
          actions: assign({
            count: (context, event) => context.count + event.data,
          })
        },
        onError: {
          target: 'failure',
          actions: assign({
            error: (context, event) => event.data as string
          })
        }
      }
    },
    failure: {
      on: {
        FETCH: 'loading'
      }
    }
  }
}, {
  actions: {
    increment: assign({
      count: (context) => context.count + 1,
    }),
    decrement: assign({
      count: (context) => context.count - 1,
    }),
  }
});

function Counter() {
  const [state, send] = useMachine(counterMachine);
  
  return (
    <div>
      <div style={{ marginBottom: '1rem' }}>
        <button onClick={() => send('DECREMENT')} disabled={state.matches('loading')}>-</button>
        <span style={{ margin: '0 1rem' }}>{state.context.count}</span>
        <button onClick={() => send('INCREMENT')} disabled={state.matches('loading')}>+</button>
      </div>
      <div>
        <button onClick={() => send('FETCH')} disabled={state.matches('loading')}>
          {state.matches('loading') ? 'Loading...' : 'Fetch Increment'}
        </button>
        {state.matches('failure') && <p style={{ color: 'red' }}>{state.context.error}</p>}
      </div>
    </div>
  );
}

export default function App() {
  return <Counter />;
}

5. MobX

Overview

MobX adopts an observable approach where state changes automatically update the UI. In this example, the counter store includes asynchronous logic to fetch an increment value, with built-in loading and error handling using MobX’s reactive model.

Pros

• Minimal Boilerplate: Less code to achieve reactivity.
• Intuitive: Easy to grasp for developers familiar with OOP.
• Automatic Optimizations: React components only update when needed.

Cons

• Implicit Magic: Automatic reactivity can hide complexities.
• Scaling Concerns: Debugging may require strict conventions in large applications.

TypeScript Example

import React from 'react';
import { makeAutoObservable, runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';

class CounterStore {
  count = 0;
  loading = false;
  error?: string;

  constructor() {
    makeAutoObservable(this);
  }
  
  increment() {
    this.count++;
  }
  
  decrement() {
    this.count--;
  }

  async fetchIncrement() {
    this.loading = true;
    this.error = undefined;
    try {
      const increment = await new Promise<number>((resolve) => {
        setTimeout(() => resolve(5), 1000);
      });
      runInAction(() => {
        this.count += increment;
        this.loading = false;
      });
    } catch (err: any) {
      runInAction(() => {
        this.error = err.message;
        this.loading = false;
      });
    }
  }
}

const counterStore = new CounterStore();

const Counter = observer(() => (
  <div>
    <div style={{ marginBottom: '1rem' }}>
      <button onClick={() => counterStore.decrement()} disabled={counterStore.loading}>-</button>
      <span style={{ margin: '0 1rem' }}>{counterStore.count}</span>
      <button onClick={() => counterStore.increment()} disabled={counterStore.loading}>+</button>
    </div>
    <div>
      <button onClick={() => counterStore.fetchIncrement()} disabled={counterStore.loading}>
        {counterStore.loading ? 'Loading...' : 'Fetch Increment'}
      </button>
      {counterStore.error && <p style={{ color: 'red' }}>{counterStore.error}</p>}
    </div>
  </div>
));

export default function App() {
  return <Counter />;
}

6. Jotai

Overview

Jotai is a minimalistic state management library that uses atoms for state and embraces the React paradigm fully without imposing a large API. Its simplicity makes it an excellent choice for small to medium-sized projects, and it can easily handle asynchronous operations.

Pros

• Lightweight: Minimal API with a small footprint.
• Flexible: Works well for both local and shared state.
• Native React Feel: No need for cumbersome providers in many cases.

Cons

• Ecosystem Maturity: Still growing compared to older libraries.
• Advanced Patterns: Might require additional patterns for very complex state management.

TypeScript Example

import React from 'react';
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const loadingAtom = atom(false);
const errorAtom = atom<string | null>(null);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [loading, setLoading] = useAtom(loadingAtom);
  const [error, setError] = useAtom(errorAtom);

  const handleFetchIncrement = async () => {
    setLoading(true);
    setError(null);
    try {
      const increment = await new Promise<number>((resolve) => {
        setTimeout(() => resolve(5), 1000);
      });
      setCount(count + increment);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <div style={{ marginBottom: '1rem' }}>
        <button onClick={() => setCount(count - 1)} disabled={loading}>-</button>
        <span style={{ margin: '0 1rem' }}>{count}</span>
        <button onClick={() => setCount(count + 1)} disabled={loading}>+</button>
      </div>
      <div>
        <button onClick={handleFetchIncrement} disabled={loading}>
          {loading ? 'Loading...' : 'Fetch Increment'}
        </button>
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
    </div>
  );
}

export default function App() {
  return <Counter />;
}

7. Effector

Overview

Effector is a reactive state manager that emphasizes functional programming principles and explicit data flow. It offers powerful tools like stores, events, and effects to handle both synchronous and asynchronous logic in a very structured manner.

Pros

• Predictable Flow: Explicit events and effects provide clear data flow.
• High Performance: Optimized for minimizing unnecessary renders.
• Scalable: Suitable for complex applications with intricate state logic.

Cons

• Learning Curve: Concepts like effects and sampling may take some time to master.
• Verbosity: Setting up stores and events can be more involved compared to simpler solutions.

TypeScript Example

import React from 'react';
import { createStore, createEvent, createEffect, sample } from 'effector';
import { useStore } from 'effector-react';

interface CounterState {
  count: number;
  loading: boolean;
  error?: string;
}

const increment = createEvent();
const decrement = createEvent();
const fetchIncrement = createEvent();

const fetchIncrementFx = createEffect(async () => {
  // Simulate an asynchronous API call.
  return await new Promise<number>((resolve) => {
    setTimeout(() => resolve(5), 1000);
  });
});

const $counter = createStore<CounterState>({ count: 0, loading: false, error: undefined })
  .on(increment, (state) => ({ ...state, count: state.count + 1 }))
  .on(decrement, (state) => ({ ...state, count: state.count - 1 }))
  .on(fetchIncrement, (state) => ({ ...state, loading: true, error: undefined }))
  .on(fetchIncrementFx.doneData, (state, payload) => ({ ...state, count: state.count + payload, loading: false }))
  .on(fetchIncrementFx.failData, (state, error) => ({ ...state, loading: false, error: error.message || 'Error' }));

sample({
  clock: fetchIncrement,
  target: fetchIncrementFx,
});

function Counter() {
  const { count, loading, error } = useStore($counter);
  
  return (
    <div>
      <div style={{ marginBottom: '1rem' }}>
        <button onClick={() => decrement()} disabled={loading}>-</button>
        <span style={{ margin: '0 1rem' }}>{count}</span>
        <button onClick={() => increment()} disabled={loading}>+</button>
      </div>
      <div>
        <button onClick={() => fetchIncrement()} disabled={loading}>
          {loading ? 'Loading...' : 'Fetch Increment'}
        </button>
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
    </div>
  );
}

export default function App() {
  return <Counter />;
}

Conclusion

Each state management library brings unique strengths:

• Redux Toolkit offers a robust and predictable framework that scales well with large applications.
• Recoil provides a modern, React-centric approach with fine-grained state control.
• Zustand emphasizes minimalism and directness with a hook-based API.
• XState shines when your application benefits from explicit state machines and clear transitions.
• MobX simplifies reactivity with automatic updates and minimal boilerplate.
• Jotai is a lightweight and flexible solution that fits naturally into the React paradigm.
• Effector promotes a highly predictable and scalable architecture with explicit data flow.

Of course, our overview has only scratched the surface of what’s available in the rich ecosystem of state management solutions for React. There are many more great libraries out there — such as Overmind, Apollo Client (for GraphQL-focused state), Hookstate, and Valtio — each offering unique patterns and features to match different project needs.

Your choice ultimately depends on your project’s complexity, team expertise, and specific requirements. Experimenting with these options can help you strike the perfect balance between simplicity, performance, and control in your React applications. Happy coding!