React Server Actions have helped me: ◆ Write less code ◆ Build better user experiences How can we create products that are resilient to slower internet connections and instantly provide feedback on user input? ↓

What if the user closed the tab thinking they made the vote but in reality the request is still pending?

This seems to work: useEffect(() => { function handler(e) { if (!state.pending) return; e.preventDefault(); } window.addEventListener('beforeunload', handler); return () => { window.removeEventListener('beforeunload', handler); }; }, [state.pending]); Where `state.pending` comes from `useOptimistic` state.

Automate up to 70% of your customer support today. Save time and help your users find answers quickly. Try now at

curious about error handling, if the optimistic+server actions, end up conflicting with db data. I get it that the likelihood is .0001 low of the conflict in this example, but say in a scenario where 100 users are up and down voting... what could my risk of mutant mutations be?

Since I'm using Redis here, you could use transactions to make sure every upvote was counted when 100 folks modify the same item. There wouldn't be conflicts on inserts since each has a new UUID. Does that answer your question?

Love this @leeerob - I think this was where I tripped up a bit in the NextJS docs. There isn’t a huge amount of information on using forms in a client context (useFormState etc) vs a RSC context. It’s like the ServerActions guide and forms in nextjs guide need squashing together.

Good news, we recently updated these docs and combined them!

What are you using to generate those subtitles and the animation?

What about error handling? Let’s say some API failed in server actions, what is the optimistic and standard way to handle all those errors on client side?

I cover error handling a bit here with `useFormStatus`

This is great!