useContext useReducer—Ghost Cart: Mutation Skips Re-render

import React, { createContext, useContext, useState } from 'react';

// Step 1: Create the context object.
// The argument to createContext is the DEFAULT value —
// used only when a component reads context WITHOUT a Provider above it.
const ThemeContext = createContext('light');

// Step 2: Build a custom Provider component.
// This keeps all theme-related state and logic in one place.
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  // We pass both the value AND the updater so consumers can read and write
  const contextValue = {
    theme,
    toggleTheme: () => setTheme(prev => prev === 'light' ? 'dark' : 'light'),
  };

  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
}

// Step 3: Build a custom hook to consume this context.
// This pattern lets you add error-checking in one place.
function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    // This fires if someone uses useTheme() outside of ThemeProvider
    throw new Error('useTheme must be used inside a ThemeProvider');
  }
  return context;
}

// --- Consumer Components ---
// Notice: NEITHER of these receives any props from their parent.
// They reach directly into the context channel.

function Header() {
  const { theme } = useTheme(); // reads theme, doesn't need toggleTheme
  return (
    <header style={{ background: theme === 'dark' ? '#1a1a1a' : '#ffffff', color: theme === 'dark' ? '#fff' : '#000', padding: '1rem' }}>
      <h1>My App — Current theme: {theme}</h1>
    </header>
  );
}

function SettingsPanel() {
  const { theme, toggleTheme } = useTheme(); // reads and writes
  return (
    <div style={{ padding: '1rem' }}>
      <p>Theme setting: <strong>{theme}</strong></p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

// Step 4: Wrap your app (or relevant subtree) in the Provider.
// Header and SettingsPanel can be nested ANY depth and still work.
export default function App() {
  return (
    <ThemeProvider>
      <Header />
      <main>
        <SettingsPanel />
      </main>
    </ThemeProvider>
  );
}

// The reducer lives OUTSIDE the component — it's a pure function.
// This means you can import it into a test file and test it with zero React setup.

// Define action types as constants to avoid typo bugs (e.g. 'ADD_ITME' instead of 'ADD_ITEM')
export const CART_ACTIONS = {
  ADD_ITEM:      'ADD_ITEM',
  REMOVE_ITEM:   'REMOVE_ITEM',
  INCREMENT_QTY: 'INCREMENT_QTY',
  DECREMENT_QTY: 'DECREMENT_QTY',
  CLEAR_CART:    'CLEAR_CART',
};

// The initial state shape — defined once, reused everywhere
export const initialCartState = {
  items: [],       // Array of { id, name, price, quantity }
  totalItems: 0,
  totalPrice: 0,
};

// Helper: recalculate totals whenever items change
function calculateTotals(items) {
  return {
    totalItems: items.reduce((sum, item) => sum + item.quantity, 0),
    totalPrice: items.reduce((sum, item) => sum + item.price * item.quantity, 0),
  };
}

// THE REDUCER — the single source of truth for how cart state changes
export function cartReducer(state, action) {
  switch (action.type) {

    case CART_ACTIONS.ADD_ITEM: {
      const existingItem = state.items.find(item => item.id === action.payload.id);

      let updatedItems;
      if (existingItem) {
        // Item already in cart — increment quantity instead of duplicating
        updatedItems = state.items.map(item =>
          item.id === action.payload.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      } else {
        // New item — add it with quantity of 1
        updatedItems = [...state.items, { ...action.payload, quantity: 1 }];
      }

      return {
        ...state,
        items: updatedItems,
        ...calculateTotals(updatedItems), // spread in recalculated totals
      };
    }

    case CART_ACTIONS.REMOVE_ITEM: {
      const filteredItems = state.items.filter(item => item.id !== action.payload.id);
      return {
        ...state,
        items: filteredItems,
        ...calculateTotals(filteredItems),
      };
    }

    case CART_ACTIONS.DECREMENT_QTY: {
      // If quantity would drop to 0, remove the item entirely
      const decrementedItems = state.items
        .map(item =>
          item.id === action.payload.id
            ? { ...item, quantity: item.quantity - 1 }
            : item
        )
        .filter(item => item.quantity > 0); // auto-remove zero-quantity items

      return {
        ...state,
        items: decrementedItems,
        ...calculateTotals(decrementedItems),
      };
    }

    case CART_ACTIONS.CLEAR_CART:
      return initialCartState; // reset to the original empty state

    default:
      // Returning current state on unknown actions prevents silent failures
      return state;
  }
}

// --- BEFORE: useState with complex logic scattered in handlers ---
function ShoppingCartBefore() {
  const [cart, setCart] = useState({ items: [], total: 0 });

  const addItem = (item) => {
    setCart(prev => {
      const existing = prev.items.find(i => i.id === item.id);
      let newItems;
      if (existing) {
        newItems = prev.items.map(i =>
          i.id === item.id ? { ...i, qty: i.qty + 1 } : i
        );
      } else {
        newItems = [...prev.items, { ...item, qty: 1 }];
      }
      const total = newItems.reduce((sum, i) => sum + i.price * i.qty, 0);
      return { items: newItems, total };
    });
  };

  // removeItem, clearCart etc. also inline — hard to test, easy to bug
}

// --- AFTER: useReducer with centralized reducer ---
const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existing = state.items.find(i => i.id === action.payload.id);
      const newItems = existing
        ? state.items.map(i => i.id === existing.id ? { ...i, qty: i.qty + 1 } : i)
        : [...state.items, { ...action.payload, qty: 1 }];
      return { ...state, items: newItems, total: newItems.reduce((s, i) => s + i.price * i.qty, 0) };
    }
    // other cases ...
    default:
      return state;
  }
};

function ShoppingCartAfter() {
  const [cart, dispatch] = useReducer(cartReducer, { items: [], total: 0 });

  const addItem = (item) => dispatch({ type: 'ADD_ITEM', payload: item });
  // other handlers become one-liners
}

// The reducer can now be exported and unit-tested in isolation!

import React, { createContext, useContext, useReducer } from 'react';
import { cartReducer, initialCartState, CART_ACTIONS } from './cartReducer';

// --- CONTEXT SETUP ---

const CartStateContext    = createContext(null); // holds the state
const CartDispatchContext = createContext(null); // holds the dispatch function

// Separating state and dispatch contexts is a performance optimisation:
// A component that only dispatches (like a button) won't re-render when state changes.
function CartProvider({ children }) {
  const [cartState, dispatch] = useReducer(cartReducer, initialCartState);

  return (
    <CartStateContext.Provider value={cartState}>
      <CartDispatchContext.Provider value={dispatch}>
        {children}
      </CartDispatchContext.Provider>
    </CartStateContext.Provider>
  );
}

// Custom hooks — clean API, built-in error checking
function useCartState() {
  const context = useContext(CartStateContext);
  if (context === null) throw new Error('useCartState must be used inside CartProvider');
  return context;
}

function useCartDispatch() {
  const context = useContext(CartDispatchContext);
  if (context === null) throw new Error('useCartDispatch must be used inside CartProvider');
  return context;
}

// --- PRODUCT CATALOGUE ---

const PRODUCTS = [
  { id: 101, name: 'Mechanical Keyboard', price: 129.99 },
  { id: 102, name: 'USB-C Hub',           price: 39.99  },
  { id: 103, name: 'Webcam HD',           price: 79.99  },
];

function ProductCard({ product }) {
  // Only subscribes to dispatch — won't re-render on cart state changes
  const dispatch = useCartDispatch();

  function handleAddToCart() {
    dispatch({
      type: CART_ACTIONS.ADD_ITEM,
      payload: product, // pass the full product object as the payload
    });
  }

  return (
    <div style={{ border: '1px solid #ccc', padding: '1rem', marginBottom: '0.5rem', borderRadius: '8px' }}>
      <strong>{product.name}</strong>
      <span style={{ marginLeft: '1rem', color: '#555' }}>${product.price.toFixed(2)}</span>
      <button onClick={handleAddToCart} style={{ marginLeft: '1rem' }}>Add to Cart</button>
    </div>
  );
}

// --- CART DISPLAY ---

function CartSummary() {
  // Subscribes to cart STATE — re-renders when items change
  const { items, totalItems, totalPrice } = useCartState();
  const dispatch = useCartDispatch();

  if (items.length === 0) {
    return <p style={{ color: '#888' }}>Your cart is empty.</p>;
  }

  return (
    <div style={{ background: '#f9f9f9', padding: '1rem', borderRadius: '8px' }}>
      <h3>Cart ({totalItems} items)</h3>
      {items.map(item => (
        <div key={item.id} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
          <span>{item.name}</span>
          <span style={{ color: '#555' }}>${item.price.toFixed(2)} × {item.quantity}</span>

          {/* Decrement — auto-removes item if quantity hits 0 (handled in reducer) */}
          <button onClick={() => dispatch({ type: CART_ACTIONS.DECREMENT_QTY, payload: { id: item.id } })}>−</button>
          <button onClick={() => dispatch({ type: CART_ACTIONS.ADD_ITEM,      payload: item })}>+</button>
          <button onClick={() => dispatch({ type: CART_ACTIONS.REMOVE_ITEM,   payload: { id: item.id } })}
            style={{ color: 'red' }}>Remove</button>
        </div>
      ))}
      <hr />
      <strong>Total: ${totalPrice.toFixed(2)}</strong>
      <button onClick={() => dispatch({ type: CART_ACTIONS.CLEAR_CART })}
        style={{ marginLeft: '1rem', background: '#e55', color: '#fff', border: 'none', padding: '0.3rem 0.75rem', borderRadius: '4px' }}>
        Clear Cart
      </button>
    </div>
  );
}

// --- APP ENTRY POINT ---

export default function App() {
  return (
    <CartProvider>       {/* All cart state + dispatch live here */}
      <h1>Dev Gear Shop</h1>
      <h2>Products</h2>
      {PRODUCTS.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
      <h2 style={{ marginTop: '2rem' }}>Your Cart</h2>
      <CartSummary />
    </CartProvider>
  );
}

// 🚫 ANTI-PATTERN: Unmemoised context value causes all consumers to re-render
function BadProvider({ children }) {
  const [user, setUser] = useState(null);
  // Every time BadProvider re-renders (e.g., due to parent), this creates a NEW object
  // Even if user hasn't changed, all consumers see a new reference → re-render
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// ✅ FIX: memoise the context value
function GoodProvider({ children }) {
  const [user, setUser] = useState(null);
  const value = useMemo(() => ({ user, setUser }), [user]); // only new object when user changes
  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

// DECISION GUIDE — no need to run this, it's a reference map

// ✅ USE LOCAL useState WHEN:
// - Only one or two components need this state
// - State is simple (a boolean, a string, a single number)
// - State doesn't need to survive navigation away from a component
const [isMenuOpen, setIsMenuOpen] = useState(false);

// ✅ USE useContext + useReducer WHEN:
// - Multiple components at different depths need the same state
// - State has complex transition logic (like our cart)
// - You want testable state logic without a full Redux setup
// - The feature is self-contained (cart, auth session, wizard)

// ✅ USE REDUX TOOLKIT WHEN:
// - Multiple teams work on the same codebase
// - You need middleware (thunks for async, sagas, etc.)
// - You want time-travel debugging and action history
// - You have 10+ slices of global state that all interact

// ✅ USE ZUSTAND / JOTAI WHEN:
// - You want minimal boilerplate with shared global state
// - You need to share state between components NOT in the same tree
// - Performance of frequent updates is critical
//   (Zustand doesn't use React context internally — no re-render cascade)

// THE RULE OF THUMB:
// Reach for the simplest tool that solves your actual problem.
// useState → useContext+useReducer → Zustand → Redux Toolkit
// Move right only when the tool on the left genuinely stops working for you.

import { cartReducer, initialCartState, CART_ACTIONS } from './cartReducer';

// Unit test: pure function, no React dependency

describe('cartReducer', () => {
  test('ADD_ITEM adds a new item with quantity 1', () => {
    const newState = cartReducer(initialCartState, {
      type: CART_ACTIONS.ADD_ITEM,
      payload: { id: 1, name: 'Test', price: 10 },
    });
    expect(newState.items).toHaveLength(1);
    expect(newState.items[0].quantity).toBe(1);
    expect(newState.totalItems).toBe(1);
    expect(newState.totalPrice).toBe(10);
  });

  test('ADD_ITEM on existing item increments quantity', () => {
    const stateWithItem = cartReducer(initialCartState, {
      type: CART_ACTIONS.ADD_ITEM,
      payload: { id: 1, name: 'Test', price: 10 },
    });
    const nextState = cartReducer(stateWithItem, {
      type: CART_ACTIONS.ADD_ITEM,
      payload: { id: 1, name: 'Test', price: 10 },
    });
    expect(nextState.items).toHaveLength(1);
    expect(nextState.items[0].quantity).toBe(2);
    expect(nextState.totalPrice).toBe(20);
  });

  test('DECREMENT_QTY removes item when quantity hits 0', () => {
    const stateWithOneItem = cartReducer(initialCartState, {
      type: CART_ACTIONS.ADD_ITEM,
      payload: { id: 1, name: 'Test', price: 10 },
    });
    const afterDecrement = cartReducer(stateWithOneItem, {
      type: CART_ACTIONS.DECREMENT_QTY,
      payload: { id: 1 },
    });
    expect(afterDecrement.items).toHaveLength(0);
    expect(afterDecrement.totalItems).toBe(0);
  });

  test('CLEAR_CART resets to initial state', () => {
    const stateWithItem = cartReducer(initialCartState, {
      type: CART_ACTIONS.ADD_ITEM,
      payload: { id: 1, name: 'Test', price: 10 },
    });
    const clearedState = cartReducer(stateWithItem, {
      type: CART_ACTIONS.CLEAR_CART,
    });
    expect(clearedState).toEqual(initialCartState);
  });

  test('unknown action returns current state', () => {
    const state = { items: [], totalItems: 0, totalPrice: 0 };
    const result = cartReducer(state, { type: 'UNKNOWN' });
    expect(result).toBe(state); // same reference — not mutated
  });
});

// Integration test (using React Testing Library)
// See CartProvider.test.jsx

// io.thecodeforge — javascript tutorial

import React, { createContext, useContext, useReducer } from 'react';

const ModalContext = createContext(null);
const ModalDispatch = createContext(null);

function modalReducer(state, action) {
  switch (action.type) {
    case 'OPEN_MODAL':
      return { ...state, isOpen: true, modalType: action.payload };
    case 'CLOSE_MODAL':
      return { ...state, isOpen: false, modalType: null };
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

export function ModalProvider({ children }) {
  const [state, dispatch] = useReducer(modalReducer, { isOpen: false, modalType: null });
  return (
    <ModalContext.Provider value={state}>
      <ModalDispatch.Provider value={dispatch}>
        {children}
      </ModalDispatch.Provider>
    </ModalContext.Provider>
  );
}

export function useModal() {
  return useContext(ModalContext);
}

export function useModalDispatch() {
  return useContext(ModalDispatch);
}

// io.thecodeforge — javascript tutorial

const initialState = {
  step: 'cart',
  shipping: null,
  payment: null,
  error: null,
};

function checkoutReducer(state, action) {
  switch (action.type) {
    case 'SET_SHIPPING':
      // Validates before mutate — no surprises
      if (!action.payload.zipCode) return { ...state, error: 'Missing zip' };
      return { ...state, shipping: action.payload, step: 'payment', error: null };
    case 'SET_PAYMENT':
      return { ...state, payment: action.payload, step: 'review' };
    case 'SUBMIT_ORDER':
      // Optimistic UI update — revert on failure
      return { ...state, step: 'submitting' };
    case 'ORDER_FAILED':
      return { ...state, step: 'review', error: action.payload };
    default:
      return state;
  }
}

// Test: checkoutReducer({ step: 'cart' }, { type: 'SET_SHIPPING', payload: { zipCode: '90210' } })
// Output: { step: 'payment', shipping: { zipCode: '90210' }, payment: null, error: null }

// io.thecodeforge — javascript tutorial

import { useCart, useCartDispatch } from './CartContext';

function CartItem({ id, name, price, quantity }) {
  const dispatch = useCartDispatch();
  return (
    <div>
      <span>{name} x {quantity}</span>
      <button onClick={() => dispatch({ type: 'REMOVE_ITEM', payload: id })}>
        Delete
      </button>
    </div>
  );
}

function CartTotal() {
  const { items } = useCart();
  // Dumb component — just reads state, no logic
  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  return <h3>Total: ${total.toFixed(2)}</h3>;
}

// CartItem doesn't know about validation or API calls
// CartTotal doesn't handle state mutations
// All logic lives in the cartReducer

// io.thecodeforge — javascript tutorial

// github.com/your-team/cart-starter
// Production reducer with test validation

const initialState = { items: [], total: 0 }

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      const existing = state.items.find(i => i.id === action.payload.id)
      const updated = existing
        ? state.items.map(i => i.id === action.payload.id
          ? { ...i, qty: i.qty + 1 }
          : i)
        : [...state.items, { ...action.payload, qty: 1 }]
      return { ...state, items: updated }
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(i => i.id !== action.payload.id)
      }
    default:
      return state
  }
}

// io.thecodeforge — javascript tutorial

import React, { createContext, useContext, useReducer } from 'react';

const CountContext = createContext(null);

function countReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    default: return state;
  }
}

function Counter() {
  const { state, dispatch } = useContext(CountContext);
  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </>
  );
}

export function App() {
  const [state, dispatch] = useReducer(countReducer, { count: 0 });
  return (
    <CountContext.Provider value={{ state, dispatch }}>
      <Counter />
    </CountContext.Provider>
  );
}

// io.thecodeforge — javascript tutorial

import React, { createContext, useContext, useReducer } from 'react';

const CartContext = createContext(null);

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD': return { items: [...state.items, action.product] };
    case 'REMOVE': return { items: state.items.filter(i => i.id !== action.id) };
    default: return state;
  }
}

export function useCart() {
  const ctx = useContext(CartContext);
  if (!ctx) throw new Error('useCart must be inside CartProvider');
  return ctx;
}

export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  return <CartContext.Provider value={{ state, dispatch }}>{children}</CartContext.Provider>;
}