The reducer is a plain function
The old array is untouched, the unchanged task object is reused (so memo can skip it later), and an unknown action fails loudly.
Milestones 2 and 3: every change to the tasks goes through one reducer, the tasks and dispatch are shared by two contexts with custom hooks, and a small external store read with useSyncExternalStore saves them to localStorage so they survive a reload.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a "cleared-done" action to tasksReducer and show the full case.
Write a useTaskCount(status) custom hook that returns how many tasks have that status.
Explain it without notes
Why split the tasks and dispatch into two contexts?
How does useSyncExternalStore work, and why must getSnapshot return a cached value?
Compare saving tasks with useReducer + useEffect against an external store.
How would you keep two open tabs of the board in sync?
Preview
Console
Nothing logged yet.Expected console output
[ 't1:done', 't2:todo' ]
start unchanged: todo | t2 object reused: true
Unknown action: renamed