Milestone 3: reducer + context + a store saved to localStorage
Add, edit (✎, then Enter or Escape), move and delete tasks. Then press Reload from storage: the board re-reads what was saved, as a page reload would. The preview's localStorage is in memory, so pressing Run starts fresh. Milestone 2 is the same app with useReducer in the provider instead of the store.
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.