Optimistic todo list
Keep an optimistic interface consistent when network mutations fail.MediumState Management
45 min54.6% acceptance
Description
Create a todo list where additions and toggles appear immediately. Use the injected initialTodos, addTodo, and toggleTodo props, reconcile their promises without changing item order, and roll back only the failed mutation with an inline error. Use a New todo textbox, an Add todo button, and a checkbox named by each todo label.
Requirements
A newly added todo appears before its network mutation resolves.
Toggling a todo updates its visible completed state before its network mutation resolves.
When a mutation rejects, only that mutation is rolled back while unrelated optimistic changes remain.
Successful reconciliation preserves the visible order of todo items.
A failed mutation displays an inline error in an assertive status or alert region.
Failed addition
Input
Add an item while the request rejects
Expected output
The optimistic item is removed and an error is announced
Constraints
Update the UI before the request resolvesRollback only the failed mutationAnnounce errors to assistive technology
Hints
Hint 1
Give every mutation a stable identity and record enough information to reverse only that operation.
Hint 2
Apply the optimistic action immediately, then reconcile success or failure through reducer actions tied to its identity.
Hint 3
On rejection, invert the matching pending change without replacing unrelated state and expose the error in a live region.
optimistic UIreducerserror handling