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;
  }
}

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>
  );
}

// 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