useOptimistic + useActionState: React 19 Killed 50 Lines of My Boilerplate

Every form submission in React used to look like this:

const [data, setData] = useState(null)

const [loading, setLoading] = useState(false)

const [error, setError] = useState(null)



async function handleSubmit(e) {

  e.preventDefault()

  setLoading(true)

  try {

    const result = await submitToServer(formData)

    setData(result)

  } catch (err) {

    setError(err.message)

  } finally {

    setLoading(false)

  }

}

Three useState calls. A try/catch/finally. Manual loading and error flags. And that's without optimistic updates — add those and you're looking at another 20 lines of snapshot/revert logic.

React 19 ships two hooks that delete most of this.

useActionState — form lifecycle in one hook

const [error, submitAction, isPending] = useActionState(

  async (prevState, formData) => {

    const res = await fetch('/api/submit', {

      method: 'POST',

      body: formData,

    })

    if (!res.ok) return 'Something went wrong'

    return null

  },

  null

)



return (

  <form action={submitAction}>

    <input name="email" type="email" />

    <button disabled={isPending}>

      {isPending ? 'Sending...' : 'Submit'}

    </button>

    {error && <p>{error}</p>}

  </form>

)

isPending is automatic. Error state is the return value of your action. No useState, no try/catch wrappers, no finally.

useOptimistic — instant UI without manual rollback

The old way of doing a like button:

// snapshot → update → revert on error = ~30 lines

The React 19 way:

const [optimisticLikes, addOptimisticLike] = useOptimistic(

  likes,

  (current, increment) => current + increment

)



async function handleLike() {

  addOptimisticLike(1)      // instant UI

  await likePost(postId)    // server confirms

}



return <button onClick={handleLike}>❤️ {optimisticLikes}</button>

That's it. If the server call fails, React automatically reverts to the real value — no manual rollback code needed. The optimistic state is just a temporary layer that disappears when the action settles.

One important gotcha

addOptimistic must be called before any await in your action. React's transition system only captures optimistic updates issued synchronously before the first suspension point. Call it after an await and the update won't show up.

// ✅ correct

addOptimisticLike(1)

await likePost(postId)



// ❌ won't work

await someOtherThing()

addOptimisticLike(1)

When to still use React Query / SWR

These hooks are for component-local action state. If your mutation needs to invalidate a cache shared across multiple components, you still want React Query or similar. But for the submit-and-respond pattern that covers the majority of forms and mutations in a typical app — these built-ins are now the right default.