Async Actions Pattern
Design reliable mutation UX with optimistic updates, feedback tiers, retry, and undo strategies.
OverviewLink to section
Async actions are where product quality becomes visible.
Unlike data fetching, actions change reality:
- saving data
- deleting content
- triggering business logic
- updating user state
This guide defines how to handle mutations in a way that feels:
- fast
- reliable
- understandable
- production-ready
Key principle
Loading is about waiting. Actions are about trust.
What you’ll implementLink to section
Immediate feedback
Correct feedback level
Recovery strategies
Mental modelLink to section
Actions should feel instant Errors should feel recoverable Nothing should feel broken
StepsLink to section
Choose optimistic vs pessimisticLink to section
Not all actions should behave the same.
Use optimistic UI when
- toggles (enable / disable)
- starring / favoriting
- reversible updates
Use pessimistic UI when
- payments
- destructive irreversible actions
- permission-sensitive changes
Rule
If you can safely undo it → optimistic If you cannot → wait for server confirmation
Apply the right feedback tierLink to section
Not every action deserves the same UX weight.
Inline feedback
Inline feedback keeps users in flow and close to the affected element.
Design retry and undo flowsLink to section
Recovery is part of the UX.
Retry
- must be explicit
- must be safe
- must be idempotent
Undo
- works best for destructive actions
- requires real backend support
- should be immediate
Important
Undo is not a UI trick. It must be supported by your backend logic.
Feedback tiersLink to section
| Level | When to use |
|---|---|
| Inline | expected, local changes |
| Toast | non-blocking confirmation or failure |
| Dialog | destructive or irreversible actions |
Never mix roles.
Error messagingLink to section
Good error messages:
- explain what failed
- suggest what to do next
- stay calm and clear
ExamplesLink to section
Good
- “Couldn’t save changes. Check your connection and retry.”
- “Payment failed. Try another card.”
Bad
- “Something went wrong”
- “Unknown error”
Rule
Always include: what failed + what to do next
Common patternsLink to section
Save flowLink to section
- inline loading state
- toast success or error
- retry on failure
Delete flowLink to section
- confirmation dialog
- toast with undo
- retry if restore fails
Toggle flowLink to section
- instant UI change
- rollback on error
- toast feedback
Decision guideLink to section
Prefer
- instant feedback over spinners
- clear recovery paths
- consistent feedback levels
- optimistic updates when safe
Avoid
- blocking UI for low-risk actions
- silent failures
- no retry or undo path
- inconsistent feedback patterns
Why this mattersLink to section
Async actions are one of the biggest trust signals in a product.
Bad mutation UX leads to:
- hesitation
- repeated clicks
- confusion
- lost confidence
Good mutation UX feels:
- fast
- predictable
- safe
That is where products start to feel production-ready.