Summary - Context deep dive

Make cart state global with context + useReducer.

Summary - Context deep

In this group you learned to split context for performance, combine it with useReducer, and write guard hooks against the null default danger. Now you can safely manage large state.

The recipe: separate what changes often from what doesn't, write a custom useXContext hook per context, throw errors early and meaningfully. These three steps keep global state clean and fast.

In the next step you'll write a CartProvider combining two contexts + reducer for a cart.

Exercise CartProvider skeleton

Complete the skeleton. Write a CartProvider component. Call useReducer(cartReducer, { '{ items: [] }' }); destructure as [state, dispatch]. Return <CartStateContext.Provider value={ '{ state }' }> wrapping <CartDispatchContext.Provider value={ '{ dispatch }' }>{ '{ children }' }</CartDispatchContext.Provider></CartStateContext.Provider>. Export it.

Show example solution

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

export default CartProvider;

Test yourself

What does a guard hook do?
- Throw on null
- Update state
- Access DOM
- Skip useEffect
Show answer

Throw on null — Guard hook throws on null.
Match the context deep steps

two contexts

state + dispatch
useReducer

Big state
guard hook

null error
Provider

Wraps

Next lesson: The reducer pattern

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies