State Management Approaches in React

State management is the process of storing, updating, and sharing data across components in an application. In small applications, local component state using useState is usually enough. However, as applications grow, problems like prop drilling, duplicated state, difficult debugging, and unnecessary rerenders start appearing.

• Local state works well for isolated UI interactions.
• Global state becomes important when multiple distant components need the same data.
• Modern React applications usually combine multiple state management solutions together.

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}
      

Context API

Context API is React's built-in solution for sharing state globally without prop drilling. It works well for themes, authentication state, language settings, and lightweight shared UI state. However, Context is not optimized for high-frequency updates because changing context values can rerender many components.

import { createContext, useContext } from "react";

const ThemeContext = createContext("dark");

export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Dashboard />
    </ThemeContext.Provider>
  );
}

function Dashboard() {
  const theme = useContext(ThemeContext);

  return <div>{theme}</div>;
}
      

Redux Toolkit

Redux Toolkit is the modern official way to use Redux. It simplifies Redux development by removing boilerplate and providing built-in utilities for slices, reducers, async actions, and immutable updates. Redux is highly scalable and excellent for large enterprise applications.

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",

  initialState: {
    value: 0,
  },

  reducers: {
    increment: (state) => {
      state.value += 1;
    },
  },
});

export const { increment } = counterSlice.actions;

export default counterSlice.reducer;
      

Zustand

Zustand is a lightweight modern state management library focused on simplicity and performance. It provides a minimal API with less boilerplate than Redux and supports selector-based subscriptions for optimized rerenders.

import { create } from "zustand";

type CounterStore = {
  count: number;
  increment: () => void;
};

export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,

  increment: () =>
    set((state) => ({
      count: state.count + 1,
    })),
}));
      

React Query / TanStack Query

React Query is designed specifically for server state management. Instead of manually storing API data inside Redux or Context, React Query handles fetching, caching, retries, synchronization, background updates, and loading states automatically.

import { useQuery } from "@tanstack/react-query";

export default function UsersPage() {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],

    queryFn: async () => {
      const res = await fetch("/api/users");

      return res.json();
    },
  });

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {data.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}