# 🚀 New React Challenge: Instant UI with useOptimistic

> Source: <https://dev.to/reactchallenges/new-react-challenge-instant-ui-with-useoptimistic-16lc>
> Published: 2026-05-23 10:37:07+00:00

Ever clicked a like button and watched it stall for a second while the server thinks about it? That tiny delay makes your app feel sluggish. React 19 ships useOptimistic
to fix exactly that — the UI changes before the server responds, and snaps back automatically if something goes wrong.
Learn React's useOptimistic
hook by building instant heart toggles. Click the heart, see it turn red immediately, and let React handle the server in the background. If the request fails, the heart reverts on its own — no manual rollback code.
useOptimistic
hook together with startTransition
to manage the optimistic state.addOptimistic
must be called inside startTransition
— otherwise React warns even though the UI still updates.boolean
(just the like value). The rest of data
can stay static.toggleFavoriteError
always throws. A try/catch with console.error
prevents the red error overlay in dev without affecting the optimistic revert.If you've been writing setState(optimisticValue)
, then try/catch
with manual rollbacks, useOptimistic
deletes all that boilerplate. Give it a try and feel how snappy your UI can be.
