React State Management — Context, Zustand & Redux Toolkit

import { useState } from 'react';

export function SearchPage() {
  // Lifted state: both children need "query", so their parent owns it
  const [query, setQuery] = useState('');

  return (
    <div>
      <SearchInput query={query} onQueryChange={setQuery} />
      <SearchResults query={query} />
    </div>
  );
}

function SearchInput({ query, onQueryChange }) {
  return (
    <input
      value={query}
      onChange={(e) => onQueryChange(e.target.value)}
      placeholder="Search products..."
    />
  );
}

function SearchResults({ query }) {
  return <p>Showing results for: {query}</p>;
}

import { createContext, useMemo, useState } from 'react';

// ✅ Two contexts — a cart update no longer touches theme consumers
const ThemeContext = createContext(null);
const CartContext = createContext(null);

export function AppProviders({ children }) {
  const [theme, setTheme] = useState('light');
  const [cartCount, setCartCount] = useState(0);

  // Memoized values: the reference only changes when the data changes
  const themeValue = useMemo(
    () => ({ theme, toggleTheme: () => setTheme(t => (t === 'light' ? 'dark' : 'light')) }),
    [theme]
  );
  const cartValue = useMemo(
    () => ({ cartCount, addToCart: () => setCartCount(c => c + 1) }),
    [cartCount]
  );

  return (
    <ThemeContext.Provider value={themeValue}>
      <CartContext.Provider value={cartValue}>
        {children}
      </CartContext.Provider>
    </ThemeContext.Provider>
  );
}

import { useSyncExternalStore } from 'react';

// A hand-rolled external store — the pattern Zustand is built on
function createDemoStore(initial) {
  let state = initial;
  const listeners = new Set();

  return {
    getState: () => state,
    setState: (partial) => {
      const next = typeof partial === 'function' ? partial(state) : partial;
      state = { ...state, ...next };            // immutable merge, like Zustand's set()
      listeners.forEach((listener) => listener()); // notify subscribers
    },
    subscribe: (listener) => {
      listeners.add(listener);
      return () => listeners.delete(listener);   // unsubscribe on unmount
    },
  };
}

const cartStore = createDemoStore({ items: 0, total: 0 });

// useSyncExternalStore is React's official bridge to stores that
// live OUTSIDE the component tree. Zustand calls this internally.
function useCartStore(selector) {
  return useSyncExternalStore(
    cartStore.subscribe,                        // how to be notified
    () => selector(cartStore.getState()),       // snapshot on the client
    () => selector(cartStore.getState()),       // snapshot during SSR
  );
}

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

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    items: [],   // [{ id, name, price, qty }]
  },
  reducers: {
    // Looks like mutation — Immer turns it into an immutable update
    itemAdded: (state, action) => {
      const existing = state.items.find((i) => i.id === action.payload.id);
      if (existing) {
        existing.qty += 1;
      } else {
        state.items.push({ ...action.payload, qty: 1 });
      }
    },
    itemRemoved: (state, action) => {
      state.items = state.items.filter((i) => i.id !== action.payload);
    },
    cartCleared: (state) => {
      state.items = [];
    },
  },
});

// createSlice generated these action creators for free
export const { itemAdded, itemRemoved, cartCleared } = cartSlice.actions;
export default cartSlice.reducer;

// Selectors live next to the slice they read
export const selectCartItems = (state) => state.cart.items;
export const selectCartCount = (state) =>
  state.cart.items.reduce((sum, i) => sum + i.qty, 0);

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from '../features/cart/cartSlice';

export const store = configureStore({
  reducer: {
    cart: cartReducer,
    // user: userReducer,  ← each feature gets its own slice
  },
  // DevTools + serializability/immutability checks are ON by default
});

import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

import { useSelector, useDispatch } from 'react-redux';
import { itemAdded, selectCartCount } from './cartSlice';

// useSelector works like a Zustand selector: this component
// re-renders only when selectCartCount's result changes.
export function CartBadge() {
  const count = useSelector(selectCartCount);
  return <span>🛒 {count}</span>;
}

export function AddToCartButton({ product }) {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(itemAdded(product))}>
      Add {product.name} to cart
    </button>
  );
}

  UI event (click, submit)
        │
        ▼
  dispatch(action)              ← a plain object: { type, payload }
        │
        ▼
  reducer(state, action)        ← a PURE function: (old state, action) → new state
        │
        ▼
  store holds the new state     ← single source of truth
        │
        ▼
  subscribers notified          ← every useSelector re-runs its selector;
                                  components re-render only if their slice changed

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk('user/fetchUser', async (userId) => {
  const res = await fetch(`/api/users/${userId}`);
  if (!res.ok) throw new Error('Failed to load user');
  return res.json();
});

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, status: 'idle', error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

// In a component: dispatch(fetchUser(42))

import { create } from 'zustand';

export const useUserStore = create((set) => ({
  user: null,
  status: 'idle',
  error: null,

  // No middleware, no thunk concept — set() whenever you have news
  fetchUser: async (userId) => {
    set({ status: 'loading', error: null });
    try {
      const res = await fetch(`/api/users/${userId}`);
      if (!res.ok) throw new Error('Failed to load user');
      const user = await res.json();
      set({ user, status: 'succeeded' });
    } catch (err) {
      set({ status: 'failed', error: err.message });
    }
  },
}));

Does the data come from your server/API?
├─ YES → TanStack Query / SWR (server state ≠ store state)
└─ NO ↓

Does it belong in the URL? (filters, page, search, tab)
├─ YES → router params / searchParams
└─ NO ↓

Does only ONE component (or a tight parent+children group) use it?
├─ YES → useState (lift it up if siblings share it)
└─ NO ↓

Is it read widely but updated RARELY? (theme, locale, session)
├─ YES → Context + custom hook (memoize the value)
└─ NO ↓

Updated often / read by many / needs selective re-renders?
├─ Small-to-mid app, small team  → Zustand
└─ Large app, many devs, need action history,
   strict conventions, DevTools time-travel     → Redux Toolkit

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useCartStore = create(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set((s) => ({ items: [...s.items, item] })),
      clear: () => set({ items: [] }),
    }),
    {
      name: 'cart-storage', // localStorage key
      // Persist only what you must — skip derived/transient fields
      partialize: (state) => ({ items: state.items }),
    }
  )
);
// That's it. Writes on change, rehydrates on load.

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from '../features/cart/cartSlice';

function loadCart() {
  try {
    const raw = localStorage.getItem('cart-storage');
    return raw ? JSON.parse(raw) : undefined; // undefined → slice initialState
  } catch {
    return undefined;
  }
}

export const store = configureStore({
  reducer: { cart: cartReducer },
  preloadedState: { cart: loadCart() },
});

// store.subscribe fires after every dispatch — mirror the slice out
store.subscribe(() => {
  try {
    localStorage.setItem('cart-storage', JSON.stringify(store.getState().cart));
  } catch {
    // storage full / private mode — fine to ignore for a cart
  }
});

// For selective persistence, migrations, etc., use the redux-persist package.

import { createContext, useEffect, useMemo, useState } from 'react';

const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  // Lazy initializer: read localStorage ONCE, not on every render
  const [theme, setTheme] = useState(
    () => localStorage.getItem('theme') ?? 'light'
  );

  // Write-through on change. Dep array: run only when theme changes.
  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);

  const value = useMemo(() => ({ theme, setTheme }), [theme]);
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}