DEV Community

Vitalii
Vitalii

Posted on

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

#typescript #react #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)
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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 (0)