As React applications grow, managing state becomes increasingly challenging. While useState() is enough for small components, larger applications often need to share data across many unrelated components.

Consider an e-commerce application. The user's authentication status, shopping cart, selected theme, notifications, and cached API data may all be needed by multiple parts of the application.

Without proper state management, developers must continuously pass data through many intermediate components, making applications difficult to maintain.

In this module, you'll learn:

• Context API
• Zustand
• Jotai
• MobX

What is State Management?

State Management is the process of storing, updating, and sharing data across an application.

Think of state as the application's memory.

Whenever something changes while your application is running, that information is stored inside state.

For example, when a user logs in:

User Logs In
      │
      ▼
Store User Information
      │
      ├────────► Navbar
      ├────────► Dashboard
      ├────────► Profile
      └────────► Settings

Instead of every component storing its own copy of the user information, all components share one source of truth.

Without state management:

App
 │
 ▼
Parent
 │
 ▼
Child
 │
 ▼
GrandChild

Data must be passed through every component.

This is called Props Drilling.

With state management:

Global Store
      │
      ├────────► Navbar
      ├────────► Dashboard
      ├────────► Profile
      └────────► Settings

Every component can directly access the shared data.

Local State vs Global State

Not every piece of data needs to be shared.

React applications generally use two kinds of state.

Local State

Local state belongs to a single component.

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

Only that component can access or modify the value.

Example:

Counter Component
        │
        ▼
count = 5

No other component knows about this value.

Local state is perfect for:

• Form inputs
• Toggle buttons
• Modal visibility
• Dropdown menus
• Counters

Global State

Global state is shared across multiple components.

Global Store
      │
      ├────────► Navbar
      ├────────► Sidebar
      ├────────► Dashboard
      ├────────► Profile
      └────────► Checkout

Every component uses the same data.

Global state is commonly used for:

• Authentication
• User Profile
• Shopping Cart
• Theme
• Language
• Notifications
• API Cache

State Management Evolution

As applications become larger, developers usually progress through different state management solutions.

useState()
      │
      ▼
Context API
      │
      ▼
Zustand
      │
      ▼
Jotai
      │
      ▼
MobX

Each tool solves increasingly complex state-sharing problems.

Context API

The Context API is React's built-in solution for sharing state globally.

No external library is required.

It is perfect for sharing values like:

• Theme
• Logged-in user
• Language
• User preferences

The Problem: Props Drilling

Imagine the following component tree:

App
 │
 ▼
Parent
 │
 ▼
Child
 │
 ▼
GrandChild

If the GrandChild component needs the user object, every component must receive and forward it.

<App user={user} />
<Parent user={user} />
<Child user={user} />
<GrandChild user={user} />

Even though only the last component actually needs the data.

This repetitive passing of props is called Props Drilling.

Context Solution

Context removes the need to pass props through intermediate components.

Context
      │
      ├────────► Parent
      ├────────► Child
      └────────► GrandChild

Any component inside the provider can access the value directly.

Creating Context

import { createContext } from "react";

const UserContext = createContext();

createContext() creates a new context object.

Providing Context

Wrap your application inside a Provider.

<UserContext.Provider value="Samir">
    <App />
</UserContext.Provider>

Everything inside <App /> can now access "Samir".

Consuming Context

import { useContext } from "react";

const user = useContext(UserContext);

console.log(user);

Output:

Samir

Complete Example

import { createContext, useContext } from "react";

const ThemeContext = createContext();

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

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

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

Output

dark

Context Flow

Provider
    │
    ▼
Context
    │
    ▼
Consumer

Advantages

• Built into React
• No additional packages
• Easy to learn
• Excellent for small applications
• Great for themes and authentication

Limitations

• Frequent re-renders
• Can become difficult in very large applications
• Not ideal for complex state management

When Should You Use Context?

Use Context when sharing:

• Theme
• Authentication
• Language
• User Preferences

Avoid using Context for frequently changing large datasets.

Zustand

Zustand is a lightweight state management library designed specifically for React.

Unlike Context API, Zustand does not require a Provider.

Why Zustand?

Developers like Zustand because it provides:

• Simple API
• Minimal boilerplate
• Excellent performance
• Easy learning curve
• Small bundle size

Installation

npm install zustand

Creating a Store

import { create } from "zustand";

const useStore = create((set) => ({
    count: 0,

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

Using the Store

function Counter() {
    const count = useStore((state) => state.count);
    const increment = useStore((state) => state.increment);

    return (
        <button onClick={increment}>
            {count}
        </button>
    );
}

Zustand Flow

Store
   │
   ▼
Components Subscribe
   │
   ▼
State Updates
   │
   ▼
Only Interested Components Re-render

Real Authentication Store

const useAuthStore = create((set) => ({
    user: null,

    login: (user) => set({ user }),

    logout: () => set({ user: null })
}));

Using it:

const user = useAuthStore((state) => state.user);

Advantages

• Extremely simple
• Fast
• Minimal boilerplate
• No Provider required
• Excellent React integration

Why Developers Love Zustand

• Easy to read
• Easy to maintain
• Great performance
• Perfect for medium and large applications

Jotai

Jotai is an atomic state management library.

Instead of having one large global store, Jotai stores data in independent Atoms.

What is Atomic State?

Traditional Store:

Global Store

Jotai:

Atom A

Atom B

Atom C

Atom D

Each atom stores one independent piece of state.

Installation

npm install jotai

Creating an Atom

import { atom } from "jotai";

const countAtom = atom(0);

Using an Atom

import { useAtom } from "jotai";

const [count, setCount] = useAtom(countAtom);

Complete Example

const countAtom = atom(0);

function Counter() {
    const [count, setCount] = useAtom(countAtom);

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

Jotai Flow

Atom
 │
 ▼
Component
 │
 ▼
Update Atom
 │
 ▼
Component Re-renders

Advantages

• Very simple
• Atomic updates
• Minimal re-renders
• Excellent TypeScript support

Good Use Cases

• Complex dashboards
• Forms
• Data visualization
• Large React applications

MobX

MobX is a reactive state management library.

The main philosophy is simple:

Whenever the state changes, the UI updates automatically.

MobX Philosophy

State
 │
 ▼
Observable
 │
 ▼
Automatic Tracking
 │
 ▼
UI Updates

Installation

npm install mobx
npm install mobx-react-lite

Creating a Store

import { makeAutoObservable } from "mobx";

class CounterStore {
    count = 0;

    constructor() {
        makeAutoObservable(this);
    }

    increment() {
        this.count++;
    }
}

export default new CounterStore();

Using the Store

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

const Counter = observer(() => {
    return (
        <button
            onClick={() => store.increment()}
        >
            {store.count}
        </button>
    );
});

MobX Flow

Observable State
        │
        ▼
Automatic Tracking
        │
        ▼
Component Re-renders

Advantages

• Reactive programming
• Automatic UI updates
• Powerful architecture
• Less manual work

Disadvantages

• Higher learning curve
• Less popular than Zustand
• More "magic" happening behind the scenes

Comparison

Context API vs Zustand

Context API

<Provider>
    <App />
</Provider>

Requires a Provider.

Zustand

const count = useStore((state) => state.count);

No Provider is required.

Zustand vs Jotai

Zustand vs MobX

State Management Architecture

Small Applications

useState()
      │
      ▼
Context API

Medium Applications

useState()
      │
      ▼
Zustand

Large Applications

Zustand
      │
      ├────────► Jotai
      └────────► MobX

Real-World Example

Imagine building an e-commerce website.

Multiple components need the same information.

Global Store
      │
      ├────────► Navbar
      ├────────► Cart
      ├────────► Checkout
      ├────────► Products
      ├────────► Wishlist
      └────────► Profile

Every component reads from the same store.

Best Practices

Start with Local State

Use useState() whenever possible.

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

Use Context for Simple Shared Data

Good examples:

• Theme
• Authentication
• Language

Prefer Zustand for Most Modern Applications

Reasons:

• Simple
• Fast
• Scalable
• Minimal boilerplate

Avoid Over-Engineering

Don't introduce MobX or Jotai for:

• Portfolio websites
• Landing pages
• Small projects

Keep Stores Focused

Good

authStore
cartStore
themeStore

Bad

everythingStore

Smaller stores are easier to maintain.

Summary

Key Takeaway

As React applications grow, their state management evolves.

Component State
       │
       ▼
useState()

       │
       ▼
Context API

       │
       ▼
Zustand

       │
       ▼
Jotai

       │
       ▼
MobX

For most modern React applications, the most practical combination is:

useState()
      +
Context API
      +
Zustand

This combination provides an excellent balance of simplicity, performance, scalability, and developer experience, while Jotai and MobX are generally reserved for specialized or large-scale applications.