How I’m Still Managing State in React with Just Context (and Why It Still Works in 2025)

#react #javascript

If you've been working with React for a while, you know the state management landscape can get overwhelming fast. Zustand, Jotai, Recoil, Redux Toolkit, atoms, proxies, signals—you name it.

But here’s the thing:

I’m still using React’s built-in Context API with useReducer—and it’s working just fine.
I want to show you how I structure it, why it still holds up in 2025, and what I’ve learned by keeping things simple.

Why I Haven’t Switched to Zustand, Redux, or Jotai

I’ve played around with a lot of state management libraries over the years. They’re impressive in their own ways. Zustand is sleek. Jotai is elegant. Redux (especially with Toolkit) has matured a lot.

But at the end of the day, my projects just haven’t needed the extra overhead.
Context and useReducer give me:

Full control and transparency
No new dependencies or mental models
Easy debugging and testing
Just enough flexibility for most app-scale needs

For example, here’s exactly how I manage my shopping bag state in a React app:

import {
  createContext,
  Dispatch,
  FC,
  ReactNode,
  useContext,
  useEffect,
  useMemo,
  useReducer,
} from "react";

interface BagItem {
  id: string;
  name: string;
  quantity: number;
  price: number;
}

interface BagState {
  bag: BagItem[];
  checkoutIsOpen: boolean;
}

interface BagContext {
  state: BagState;
  setState: Dispatch<Partial<BagState>>;
}

const initialState: BagState = {
  bag: [],
  checkoutIsOpen: false,
};

export const BagContext = createContext<Partial<BagContext>>({});

export const useBag: () => Partial<BagContext> = () => useContext(BagContext);

interface BagProviderProps {
  children: ReactNode;
}

const BagProvider: FC<BagProviderProps> = ({ children }) => {
  const [state, setState] = useReducer(
    (oldState: BagState, newState: Partial<BagState>) => ({
      ...oldState,
      ...newState,
    }),
    initialState
  );

  useEffect(() => {
    const localBag = localStorage.getItem("bag");
    if (localBag) {
      const payload: BagItem[] = JSON.parse(localBag);
      setState({ bag: payload });
    }
  }, []);

  const api = useMemo(
    (): BagContext => ({
      state,
      setState,
    }),
    [state]
  );

  return (
    <BagContext.Provider value={api}>
      {children}
    </BagContext.Provider>
  );
};

export default BagProvider;

This setup gives me:

A globally accessible bag state
A clean useBag() hook
Persisted state via localStorage
No external libraries

So Why Not Reach for Something Else?

If I ever find myself dealing with complex derived state, undo/redo functionality, or shared state across iframes/tabs—then sure, I might reach for Zustand or Redux.
But most apps don’t need that.
React’s built-in tools have improved, especially with features like:

useOptimistic (React 19)
Server Actions (Next.js)
React Server Components

And as React continues to shift work to the server, I think we’ll rely less on big client-side state tools—not more.

Final Thoughts

You don’t always need to chase the next hot library.
If Context + hooks do the job—and they often do—stick with them.
This setup has worked for me across a bunch of apps, and until I feel real pain, I’m happy keeping things simple and transparent.

What about you? Are you managing state the old-fashioned way, or have you gone all-in on Jotai, Zustand, or Signals?
Let’s chat—drop a comment with your current stack 👇