0
React 19's useActionState Showed Me Why Disabling My Submit Button Was Never Enough
TL;DR: React 19's useActionState reveals why simple submit-disable flags miss race conditions. It replaces manual state juggling with a safer, state-driven update tied to React's transition tracking to prevent double submits.
Traditionally forms use three pieces of state (result, submitting, error) plus a try/catch/finally pattern, which often leads to forgotten resets and stubborn double-submits. A fast vs slow connection can flip a local flag before the request resolves, allowing multiple submits. useActionState changes the pattern by letting React manage state via a function (prevState, formData) -> newState, with isPending linked to transitions. This eliminates the need for separate pending flags and fixes the double-submit issue inherently. The author shares a practical, framework-free example to illustrate the approach and its surprising effectiveness.
Question for the room: Have you adopted a state-driven submission pattern like useActionState in your own forms, and what impact did it have on double submits in real apps?
— via dev.to
Add a comment
0/2000