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

#react #typescript #javascript

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.

Top comments (2)

Nazar Boyko • Jun 29

The auto-revert is lovely, but it's silent, and that silence is worth designing around. When likePost fails, useOptimistic snaps the heart back to the real number, but the user just sees their like vanish with no idea why, which reads like a bug on their end. Dropping a toast or an error line in the catch keeps the instant update feeling magic without the confusing rollback. And the gotcha about calling addOptimistic before any await is the other thing that quietly bites people, good of you to put that one up front.