Milestone 4: URL filters, a slow API and optimistic moves
It opens on the deep link /?priority=high after a 300 ms load. Type in Search and pick a priority: watch the URL. Move a card: it jumps at once. Tick Server is down and move again: the card jumps, then returns with a message. Add/edit/delete and saving from 27.3 are left out to keep the file readable; they plug in unchanged.
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.