Rollback done right: undo one move, not the whole list
Move a was started first and failed last. Restoring the list saved before it also wiped out b's move, which the server had accepted: now the screen and the server disagree.
Milestone 4: search and priority filters live in the URL, tasks load from a slow fake API with loading, error and retry states, moves are optimistic and roll back when the server fails, and a 5,000-task archive renders only the rows you can see.
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 sort search param (?sort=title) that sorts the visible tasks by title when set.
Change useLoadTasks to also expose the time of the last successful load as a fixed-format string.
Explain it without notes
Why put filters in the URL, and how do you update a search param without breaking the Back button?
Walk through an optimistic update with rollback. What can go wrong?
How do you model loading, error and retry for a request in React?
Explain how a fixed-height virtualised list works.
Preview
Console
Nothing logged yet.Expected console output
snapshot rollback: a:todo b:todo
undo one move: a:todo b:doing