Explain Optimistic UI Updates for Form Submissions in React

79 / 100

Formsadvanced

Optimistic UI Updates for Form Submissions

Learn how to update the UI immediately on a user action before the server confirms success, and roll back if it fails.

Optimistic updates immediately reflect the expected result of a user's action in the UI — like showing a new comment right after submission — without waiting for the server's response to confirm it succeeded, making the app feel instantaneous. If the server later reports failure, the UI rolls back to its previous state and typically surfaces an error message explaining what happened.

An optimistic update is like a restaurant server bringing your appetizer to the table the moment you order, trusting the kitchen will confirm it shortly after — almost always correct, but if the kitchen turns out to be out of that dish, the server has to come back and take the plate away and apologize, rather than making you wait at the table until the kitchen confirms availability before bringing anything out at all.

Key Concepts

This technique trades a small risk (briefly showing something that might not actually persist) for a significant perceived-performance benefit, and is especially valuable for actions with a high success rate and low cost of a rare failure — liking a post, adding an item to a list, toggling a setting. For higher-stakes actions (submitting a payment, deleting an irreversible record) the safer, traditional wait-for-confirmation approach is usually preferred despite the slower perceived response.

React 19 introduced useOptimistic, a hook purpose-built for this pattern: it lets you provide a temporary, optimistic version of some state that's automatically reverted once the real underlying state update (typically from a transition or async action) resolves, without hand-rolling the temporary-state-then-revert logic yourself. Libraries like TanStack Query also provide first-class optimistic update support tied into their mutation and cache-invalidation lifecycle.

useOptimistic

Interviewers ask candidates to implement an optimistic 'like' button or comment submission, checking whether they correctly handle the rollback path on failure (not just the happy path), and whether they can articulate the specific tradeoff of optimism: better perceived performance at the cost of occasionally showing a state that has to be corrected shortly after.