Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.
Exercise 1 of 1
Six scenarios. Decide whether each one calls for useState or useReducer — and learn the signals that make the choice clear.
For each scenario, pick useState or useReducer.
A toggle button that switches between true and false.
A multi-step checkout form where each step unlocks based on the previous step's completion, and "back" must restore the previous values.
A controlled input that reflects what the user types.
A data table with sort column, sort direction, active page, page size, and selected row IDs — all changing together on user interactions.
A loading spinner that is shown while a fetch is in progress.
An async operation that can be idle, loading, succeeded, or failed — with the data or error stored alongside the status.
0/6 answered
💡 Signal to switch to useReducer: multiple state variables that change together, transitions that depend on current state, or logic you want to test separately from the component.