Smooth Async Transitions in React 19

You’ve built a form that submits data to a server. The user clicks “Save,” and for two seconds, nothing happens. They click again. Now you have duplicate requests, a confused UI, and a frustrated user.

React 19 solves this with async transitions—a fundamental shift in how React handles asynchronous updates. Instead of manually juggling loading states, error flags, and race conditions, React now tracks pending work automatically. This article explains how useTransition in React 19 differs from React 18 patterns, when to use these primitives, and how they connect to emerging browser APIs like View Transitions.

How startTransition Async Support Changes Everything

In React 18, startTransition only accepted synchronous functions. You could mark state updates as low-priority, but async operations required separate loading state management.

React 19 changes this. You can now pass async functions directly to startTransition:

const [isPending, startTransition] = useTransition()

const handleSubmit = () => {
  startTransition(async () => {
    const result = await saveToServer(data)
    setStatus(result)
  })
}

React tracks the transition while the async action runs. isPending stays true until React finishes processing the transition work.

Important: state updates scheduled after an await may not always be included in the same transition automatically. If you need those updates to remain non-urgent, wrap them in another startTransition.

This eliminates much of the boilerplate that plagued React 18 patterns:

useTransition in React 19: When to Use It

Use useTransition when you want the UI to remain responsive during expensive updates. The hook tells React: “This update can wait if something more urgent happens.”

Good use cases:

• Form submissions where users might continue typing
• Search filters that trigger data fetching
• Tab switches that load new content

Skip transitions for:

• Controlled input values (these should update immediately)
• Critical error states that need instant visibility
• Simple synchronous state changes

The key insight: transitions are about priority, not animation. React will interrupt a pending transition if the user types, scrolls, or performs any urgent interaction.

Optimistic UI in React 19 with useOptimistic

The useOptimistic hook pairs naturally with async transitions. It lets you show expected results immediately while the server confirms:

const [optimisticItems, addOptimistic] = useOptimistic(
  items,
  (current, newItem) => [...current, newItem]
)

const handleAdd = () => {
  startTransition(async () => {
    addOptimistic({ id: "temp", text: inputValue })
    await saveItem(inputValue)
  })
}

If the request fails, React automatically rolls back to the previous state. This creates perceived performance improvements without complex state reconciliation logic.

While useOptimistic works best alongside transitions or async actions, it is not strictly required—the hook can still be used independently depending on your data flow.

Scheduler Transitions vs. the View Transitions API

React’s transitions and the browser’s View Transitions API solve different problems:

Scheduler transitions (useTransition) manage when React renders updates. They handle priority and responsiveness.

View transitions manage how elements animate between states. They handle visual continuity.

React is experimenting with a <ViewTransition> component that bridges both. However, this remains experimental. The browser API itself has broad support across major browsers, including Chrome, Edge, Safari, and Firefox.

If you’re exploring view transitions today:

• Use document.startViewTransition() with feature detection
• Provide graceful fallbacks for unsupported browsers
• Avoid relying on experimental framework integrations in production

Practical Guidelines

Do:

• Wrap form submissions and data mutations in startTransition
• Use isPending to disable buttons and show loading indicators
• Combine with useOptimistic for instant feedback on predictable operations

Don’t:

• Wrap every state update in a transition
• Use transitions for urgent UI feedback like validation errors
• Assume the View Transitions API works everywhere

Conclusion

React 19 async transitions eliminate much of the manual loading state logic that cluttered React 18 applications. By passing async functions to startTransition, you get built-in pending state tracking, smoother perceived performance, and better integration with modern React patterns.

Start by replacing your manual isLoading states with useTransition. Add useOptimistic where instant feedback matters. Leave experimental View Transitions integration for when browser support matures.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.