Example 9 · 30–40 min
Context API — Shopping Cart
createContext · useReducer · split context pattern
The Question
"Build the same shopping cart as Example 8 but using React Context + useReducer instead of Redux. Use the split-context pattern to avoid unnecessary re-renders. Co-locate plain selector functions with the context. Explain the trade-offs vs Redux."
createContextuseReducersplit context patternuseContextcustom hooksco-located selectors
Context vs Redux — key trade-offs
- Context: zero extra deps, built-in, great for low-frequency updates.
- Redux: surgical re-renders via
useSelector, DevTools time-travel, middleware. - Split context (state + dispatch in separate providers) closes most of the re-render gap.
Products
Mechanical Keyboard
$89.99
Wireless Mouse
$49.99
USB-C Hub
$34.99
Monitor Stand
$29.99
Webcam HD
$59.99
Cart
Your cart is empty