{"id":228,"date":"2026-05-13T13:04:59","date_gmt":"2026-05-13T13:04:59","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/optimistic-ui-react-19-useoptimistic-six-months-in\/"},"modified":"2026-05-13T13:04:59","modified_gmt":"2026-05-13T13:04:59","slug":"optimistic-ui-react-19-useoptimistic-six-months-in","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/optimistic-ui-react-19-useoptimistic-six-months-in\/","title":{"rendered":"Optimistic UI in React 19: useOptimistic After Six Months in Production"},"content":{"rendered":"

Short version for the impatient: useOptimistic<\/code> is the first React API that made my optimistic update code shorter without making the failure cases worse. I shipped it in three places over the last six months. I’d do it again in two of them. If you want to know why, and where it doesn’t fit, read on.<\/p>\n

I had a perfectly fine pattern for optimistic UI before this. A useReducer<\/code>, a “pending” item array, an onError<\/code> that reverted, a useEffect<\/code> to reconcile with the server response. It worked. It was also somewhere around forty lines per feature, and I copied it. Three times. With slightly different bugs each time.<\/p>\n

Then I tried useOptimistic<\/code> on a comment box, deleted twenty of those lines, and stopped pretending I was going to write a generic hook for it.<\/p>\n

What useOptimistic actually does<\/h2>\n

The official version, from the React docs<\/a>, is that useOptimistic<\/code> lets you show a different state while an async action is underway. Fine. That’s the polite description.<\/p>\n

The version I’d give a junior dev on my team: it’s a useReducer<\/code> that automatically resets when the surrounding transition completes. The current state is whatever the server most recently returned. The “optimistic” state is what the user sees during a startTransition<\/code>. When the transition is done, the optimistic state is gone, replaced by whatever your server gave you. You don’t write any rollback code. You don’t have to remember to clean up. The framework does both.<\/p>\n

That’s the whole feature. The trick is figuring out where it actually helps.<\/p>\n

Before: my old optimistic comment list<\/h2>\n

Here’s a stripped version of what I had in the codebase before. A list of comments where a user can add one, and we want the new comment to appear right away:<\/p>\n

function CommentList({ initialComments, postId }) {\n  const [comments, setComments] = useState(initialComments);\n  const [pending, setPending] = useState([]);\n\n  async function addComment(text) {\n    const tempId = crypto.randomUUID();\n    const optimistic = { id: tempId, text, author: "me", status: "pending" };\n    setPending((p) => [...p, optimistic]);\n    try {\n      const saved = await api.createComment(postId, text);\n      setComments((c) => [...c, saved]);\n    } catch (err) {\n      toast.error("Couldn't post that. Try again?");\n    } finally {\n      setPending((p) => p.filter((c) => c.id !== tempId));\n    }\n  }\n\n  const all = [...comments, ...pending];\n  return <List items={all} onSubmit={addComment} \/>;\n}\n<\/code><\/pre>\n
It works. I shipped it for two years. The problems weren’t visible until I tried to add a second optimistic feature, deletes, and realized I needed a parallel pendingDeletes<\/code> array, a way to filter the visible list against both, and a careful order so the optimistic delete didn’t get clobbered by an in-flight create. That’s where it got messy.<\/p>\n
After: the useOptimistic version<\/h2>\n
import { useOptimistic, useState, startTransition } from "react";\n\nfunction CommentList({ initialComments, postId }) {\n  const [comments, setComments] = useState(initialComments);\n  const [optimistic, addOptimistic] = useOptimistic(\n    comments,\n    (state, newComment) => [...state, { ...newComment, status: "pending" }]\n  );\n\n  async function addComment(text) {\n    startTransition(async () => {\n      addOptimistic({ id: crypto.randomUUID(), text, author: "me" });\n      try {\n        const saved = await api.createComment(postId, text);\n        setComments((c) => [...c, saved]);\n      } catch (err) {\n        toast.error("Couldn't post that. Try again?");\n      }\n    });\n  }\n\n  return <List items={optimistic} onSubmit={addComment} \/>;\n}\n<\/code><\/pre>\n
A few things to notice. There’s no pending<\/code> array. There’s no rollback. If the API throws, the startTransition<\/code> ends, the optimistic state evaporates, and the list goes back to whatever comments<\/code> holds. The toast tells the user what happened. That’s it.<\/p>\n
The thing I didn’t expect: I removed every useEffect<\/code> I had in this component. The optimistic state derives from the canonical state, so there’s nothing to sync. That alone made the next bug report a lot easier to read.<\/p>\n
I cover the matching pattern for forms in my post on useActionState replacing form reducers<\/a>, if you’re stacking these React 19 hooks together. The two pair up well.<\/p>\n
Where it doesn’t fit<\/h2>\n
Three places I tried it and walked back.<\/p>\n
The first one: long-running mutations. If your API takes more than about a second, the optimistic state sits there feeling stale. The user sees their comment appear, then a beat of nothing, then the list reorders when the server replies. I added a subtle “saving” indicator on the optimistic row, which helped, but at that point I was back to tracking a status field. Not worse than before. Just not the win it had been on fast endpoints.<\/p>\n
The second one: multi-step transactions. We had a “move card to column” action that fires three requests in sequence. Update the card. Update the source column. Update the destination column. useOptimistic<\/code> is one reducer over one state. If you want to optimistically reflect “card moved” across three pieces of state, you either lift them into one combined reducer (annoying) or run three useOptimistic<\/code> hooks (also annoying, and the rollback semantics get fuzzy when one of the three fails). I went back to TanStack Query’s optimistic updates pattern<\/a> for this one. Their rollback model is more honest about partial failures.<\/p>\n
The third one: anything outside a transition. The hook only updates the optimistic state when you call addOptimistic<\/code> inside startTransition<\/code>. If you’re trying to use it from an effect that fires on mount, or from a non-transition click handler, you get nothing. The error from React is clear. The misuse is easy to commit anyway.<\/p>\n
What I keep around it<\/h2>\n
A small failure-handling pattern I now reach for every time.<\/p>\n
const [optimistic, addOptimistic] = useOptimistic(items, (state, action) => {\n  if (action.type === "add") {\n    return [...state, { ...action.item, status: "pending" }];\n  }\n  if (action.type === "remove") {\n    return state.filter((i) => i.id !== action.id);\n  }\n  return state;\n});\n<\/code><\/pre>\n
Two things I do here on top of the docs example. The reducer takes a small action object instead of a raw item, so the same hook handles add and remove without two separate hooks. And every optimistic row carries a status<\/code> field that the row component uses to dim it slightly. Users notice the dim. They notice nothing about the rollback. That tradeoff matters: people forgive a slow round trip if you tell them it’s happening.<\/p>\n
I also keep a try \/ catch<\/code> inside startTransition<\/code> and surface errors with a toast. Don’t skip the toast. The optimistic state will quietly revert and the user will think they hit “post” and the click missed.<\/p>\n
The React 19 release post lays out the design rationale if you want the underlying argument: see the React 19 announcement<\/a>. I had to read it twice before I trusted the automatic cleanup story. Worth it.<\/p>\n
What I’d do this week if you’re starting<\/h2>\n
Pick one feature where you currently fake an optimistic update with setState<\/code> and a try \/ catch<\/code>. A like button, a comment box, a row toggle. Convert that one feature only. Don’t try to do a sweeping refactor across the app. The hook is small enough that you can wrap it in a useTransition<\/code> and ship it in an afternoon.<\/p>\n
After a week of usage in one spot, you’ll have opinions. Mine, after six months: I use it on anything where the request returns in under 800ms, where there’s a single piece of state to touch, and where the error case is “show a toast and forget.” For everything else, the older TanStack Query optimistic update patterns<\/a> still beat it. That’s not a knock on useOptimistic<\/code>. It’s a small, focused API that does one job well. Recognizing that scope is most of the win.<\/p>\n
If you want more on the React 19 hooks I use day to day, I write up the ones I actually keep across my work at abrarqasim.com<\/a>. The list is shorter than the headline release notes suggest, and that’s been the better way to learn the new API: small steps, in production, one feature at a time.<\/p>\n","protected":false},"excerpt":{"rendered":"
useOptimistic in React 19 is the first optimistic UI API I actually shipped. Six months of production lessons: where it fits, where it doesn’t, what to keep.<\/p>\n","protected":false},"author":2,"featured_media":227,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"useOptimistic in React 19 is the first optimistic UI API I actually shipped. Six months of production lessons: where it fits, where it doesn't, what to keep.","rank_math_focus_keyword":"optimistic ui","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[138,35],"tags":[38,69,44,265,41,43,68],"class_list":["post-228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-web-development","tag-frontend","tag-hooks","tag-javascript","tag-optimistic-ui","tag-react","tag-react-19","tag-useoptimistic"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/228\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/227"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}