Alternative State Libraries in React

While Redux and Context API are widely used for state management in React, they aren’t the only solutions. Depending on your project’s complexity, alternative state management libraries like MobX, Zustand, and Recoil can offer simpler syntax, better performance, and more flexibility.

MobX – Reactive State Management

MobX is a reactive state management library that automatically tracks changes in state and updates your components. Unlike Redux, MobX doesn’t require boilerplate code like actions or reducers.

Key Features:

• Observable State – Any piece of state can be made observable, so components automatically re-render when it changes.
• Computed Values – Derive data from state that updates automatically.
• Minimal Boilerplate – No actions or reducers required.
• Good for large apps – Scales well without overly verbose setup.

Example – Counter with MobX:

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class CounterStore {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }
  increment() {
    this.count += 1;
  }
  decrement() {
    this.count -= 1;
  }
}

const counterStore = new CounterStore();

const Counter = observer(() => (
  <div>
    <h2>Count: {counterStore.count}</h2>
    <button onClick={() => counterStore.increment()}>+</button>
    <button onClick={() => counterStore.decrement()}>-</button>
  </div>
));

export default Counter;

Why MobX?

• Ideal for apps needing reactive and fast updates.
• Less boilerplate than Redux.
• Automatic tracking of dependencies reduces manual re-rendering.

Zustand – Minimalistic and Fast State Management

Zustand is a lightweight, flexible state management library that uses hooks to manage global state. It’s extremely easy to set up and works well with both small and large projects.

Key Features:

• Uses React hooks (useStore) for accessing state.
• Very minimalistic — no boilerplate or context wrapping needed.
• Supports async actions and middleware.
• Great for performance-sensitive apps.

Example – Counter with 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 Counter() {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

Why Zustand?

• Tiny library (~1KB) with no boilerplate.
• Easy to read and maintain.
• Great alternative for apps where Redux feels heavy.

Recoil – React-Centric State Management

Recoil is an official React state management library from Facebook, designed to work seamlessly with React’s concurrent mode and hooks.

Key Features:

• Atoms – Units of state that components can subscribe to.
• Selectors – Derived state or computed values based on atoms.
• Works naturally with React Suspense for async data.
• Minimal boilerplate and integrates easily with React’s functional components.

Example – Counter with Recoil:

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

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

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

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

Why Recoil?

• Designed for React-first approach.
• Works with async selectors and Suspense.
• Ideal for scalable apps that need fine-grained state control.