Working with State Management in React in 2024

Managing application state is one of the most critical aspects of building robust React apps. Whether you're working on a single-page application or a complex enterprise solution, how you structure and maintain state will impact performance, scalability, and developer experience.

In 2024, React developers have a rich landscape of state management tools and patterns to choose from. This blog explores the most popular approaches—ranging from native hooks to external libraries—and offers practical code examples to help you decide what works best for your project.

---

useState and useReducer Hooks

React’s built-in hooks useState and useReducer are ideal for managing local state within a component.

useState Example

The simplest way to store and update primitive values or small objects.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useReducer Example

Designed for more complex state transitions or when multiple related state updates are needed.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function CounterWithReducer() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

---

Context API

React’s Context API is powerful for sharing global state between components without prop drilling. It works best when the state is relatively stable and doesn’t change often.

Example: Theme Context

// ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

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

// ThemedComponent.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedComponent() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={() => setTheme('dark')}>Switch to Dark</button>
    </div>
  );
}

---

Redux

Redux is still widely used, especially in large-scale applications where predictable state flow and centralized control are essential.

Basic Redux Setup

// store.js
import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

export const store = createStore(counterReducer);

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function ReduxCounter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Redux Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

---

Recoil

Recoil is a newer library by Meta that simplifies shared and derived state logic. It's great for apps with deeply nested components or interdependent state slices.

Recoil Atom and Component

// atoms.js
import { atom } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0,
});

// RecoilCounter.js
import React from 'react';
import { useRecoilState } from 'recoil';
import { countState } from './atoms';

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

  return (
    <div>
      <p>Recoil Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

---

Zustand

Zustand is a tiny yet powerful state management solution. It’s ideal for projects that need a simple store with hook-based access and minimal boilerplate.

Zustand Store and Component

// store.js
import create from 'zustand';

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

// ZustandCounter.js
import React from 'react';
import { useStore } from './store';

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

  return (
    <div>
      <p>Zustand Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

---

Conclusion

In 2024, React offers a wide spectrum of state management tools to suit various development needs:

• useState and useReducer for local state logic
• Context API for lightweight global state
• Redux for structured and predictable data flow
• Recoil for flexible shared and derived state
• Zustand for minimalistic and performant global stores

Choosing the right solution depends on your app’s scale, complexity, and team workflow. Understanding the trade-offs of each tool empowers you to write cleaner, more scalable React code.