Advanced Hooks

What this module covers

4 steps · React

1. Step 1. Advanced Hooks

   useReducer — for complex state with multiple actions, cleaner than several useState calls: function reducer(state, action) { switch (action.type) { case 'INC': return { ...state, count: state.count + 1 }; case 'DEC': return { ...state, count: state.count - 1 }; default: return state; } } const [state, dispatch] = useReducer(reducer, { count: 0 }); useMemo caches computations: const filtered = useMemo( () => items.filter(i => i.active && i.name.includes(query)), [items, query] ); useCallback keeps a stable function reference: const handleDelete = useCallback( (id) => setItems(prev => prev.filter(i => i.id !== id)), [] ); Profile first — useMemo/useCallback add overhead. Only use them once you've measured an actual performance problem.

   A reducer centralizes every possible state transition into one function with named actions — easier to reason about than scattered setState calls once there are several related updates. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the reducer handle both INC and DEC by returning a new state object?

2. Step 2. Quiz: Advanced Hooks

   Answer these questions about useReducer, useMemo, and useCallback.

   useReducer suits multi-action state; useMemo caches a computed value; useCallback caches a function reference. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Answer the quiz below.

3. Step 3. Cart Reducer with Memoized Total

   Build a shopping cart using useReducer with ADD_ITEM and REMOVE_ITEM actions. Show the total price computed with useMemo.

   Recomputing total with plain JavaScript on every render would work too, but useMemo skips that work unless items actually changed — exactly the tradeoff this lesson's concepts describe. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the reducer handle both actions immutably, and is total computed via useMemo?

4. Step 4. Mini project: Advanced Hooks

   Build a shopping cart using useReducer with ADD_ITEM and REMOVE_ITEM actions. Show the total price computed with useMemo. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Recomputing total with plain JavaScript on every render would work too, but useMemo skips that work unless items actually changed — exactly the tradeoff this lesson's concepts describe. This project stage asks you to apply the same idea without step-by-step scaffolding. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the reducer handle both actions immutably, and is total computed via useMemo?