React 19's useOptimistic Hook: Key Patterns and Common Pitfalls Explained

React 19 introduces the useOptimistic hook, which displays the anticipated result of an action in the UI before the server confirms it. The hook works as a temporary view over real state, staying active only during a pending transition and automatically discarding the optimistic value once the actual state updates. Developers must trigger it inside a form action or startTransition, as calling it from a plain onClick causes the optimistic value to flash and disappear immediately. Common mistakes include reusing the same temporary ID for concurrent pending items and neglecting error handling, since the hook has no built-in error channel and requires pairing with useActionState or a toast notification. For high-stakes operations like payments or destructive deletions, experts recommend using a straightforward pending state instead, as falsely showing success can undermine user trust.