useOptimistic in React 19: Patterns and Pitfalls from Real Forms

Short summary

React 19's useOptimistic provides a transient view over real state during pending transitions, auto-discarding optimistic values once the server confirms. The author shares patterns from a comment box, like button, and settings form, plus three edge cases: triggering outside transitions causes flash-and-vanish, no built-in error channel, and reusing temp IDs merges concurrent entries. For low-confidence writes like payments, an honest pending state is safer than fake success.

• •useOptimistic is a transient view over real state, not durable storage
• •Always trigger addOptimistic from form actions or startTransition, not plain onClick
• •Pair with useActionState or toasts for error handling; use unique temp keys for concurrent items

Generated with AI, which can make mistakes.