Empty state and an optimistic add with undo
The new task appears instantly, greyed out while saving. The failing one appears, then disappears with an explanation. Without the undo, the list would show a task the server never stored.
Every request can be loading, failed, empty or successful, so model it with one status value, design a screen for each state (skeletons, retry buttons, empty messages, optimistic hints), and keep the layout from jumping when data arrives.
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.
Write a useFetch(fn, deps) hook that returns { status, data, error, retry } using one state object and the ignore flag.
Write a ProductList that shows a skeleton of 4 cards while loading, an empty state when the array is empty, and the products otherwise.
Add an optimistic "like" button: the count goes up at once, and goes back down with an error message if fakeLike() rejects.
Explain it without notes
Why model a request with one status value instead of separate booleans?
What is layout shift, why does it matter, and how do skeletons help?
How would you implement a retry button for data fetched in an effect?
Explain an optimistic update and what must happen when the server rejects it.
Preview
Console
Nothing logged yet.Expected console output
start: (empty state)
after click: Buy milk (saving...)
saved: Buy milk
after click: Buy milk, fail task (saving...)
failed: Buy milk | Server refused: fail task