Back to articles

Modern State Management in React: Beyond Redux

Majd Muhtaseb07/06/20257 minutes

Introduction

Redux has long been a staple in React state management, but the landscape has evolved. Modern React offers powerful built-in tools and lightweight libraries that can simplify your application's state management. This article explores alternatives to Redux, focusing on the Context API, Zustand, and Recoil.

The Context API

React's Context API provides a way to share state values between components without explicitly passing props through every level of the component tree. While not a full replacement for complex Redux setups, it's excellent for simpler global state or theme management.

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

Usage:

import { useTheme } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`app ${theme}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

Zustand

Zustand is a small, fast, and scalable bearbones state-management solution. It uses a simplified store creation process and integrates easily with React.

npm install zustand

import { create } from 'zustand'

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

function MyComponent() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

Recoil

Recoil is an experimental state management library for React from Facebook. It works and thinks like React. Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and into your React components.

npm install recoil

import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
} from 'recoil';

const countState = atom({
  key: 'countState', // unique ID (globally unique)
  default: 0, // default value (aka initial value)
});


function MyComponent() {
  const [count, setCount] = useRecoilState(countState);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

function App() {
  return (
    <RecoilRoot>
      <MyComponent />
    </RecoilRoot>
  );
}

Conclusion

While Redux remains a powerful tool, the React ecosystem offers compelling alternatives. The Context API suits simple scenarios, Zustand excels in its simplicity and performance, and Recoil provides fine-grained control and optimized re-renders. Choosing the right state management approach depends on your project's specific needs. Consider these modern solutions to streamline your React development workflow.