First time using useOptimistic in React 19—didn't realize it was this convenient
I always used to manage optimistic updates with manual state, but now it's handled with a single hook. The code got a lot shorter and the UX improved too.
However, handling the pending state when using it with server actions was a bit tricky. Has anyone else had a similar experience?
9 answers
Yeah, optimistic updates are amazing.
Do you have a source? Are you speaking based on official documentation?
I tried it recently too, and handling pending works better when paired with useActionState from server actions. For forms, useActionState is better, and for optimistic UI, useOptimistic seems like the way to go.
This is right lol
Well, that's a bit... When used with server actions, it can actually mess up the state. Especially for cache invalidation, sometimes it's safer to handle it directly.
I went through something similar—I handled the pending state by tying it together with useTransition. Showing optimistic updates and then tracking the actual server reflection state with a transition worked pretty well. The only thing is, rollback on error is still tough... Looks like React 19 still has a lot to improve.
Oh, I didn't know this. That's interesting.
Let me share one experience: if you overuse optimistic updates, you'll often fail to catch when the server returns a different response. At the very least, it's a good idea to attach something like a request ID to each mutation to guarantee ordering.
Same here lol