Introduction to React 19: Concurrent Features and Improvements

Let's continue our introduction to React 19 by talking about concurrent features and improvements.

Concurrent React (introduced in React 18) continues to evolve in version 19, making asynchronous rendering patterns more powerful and easier to use.

React 19's Concurrent Features and Improvements

The use() API for Async Data: One of the headline additions is the new use(promise) function. This is a special (non-Hook) function that you can call inside your components to await a Promise during rendering (What’s new in React 19 - Vercel). When you call use(promise), React will suspend the component until the promise resolves (or rejects), allowing you to write async UI logic more directly. For example:
```
import { use } from 'react';

function Cart({ cartPromise }) {
  const cart = use(cartPromise);  // Suspends here until cartPromise resolves
  return cart.map(item => <p key={item.id}>{item.title}</p>);
}

export default function Page() {
  return (
    <Suspense fallback={<div>Loading cart...</div>}>
      <Cart cartPromise={fetchCart()} />
    </Suspense>
  );
}
```
In this snippet, <Cart> will not render until cartPromise is fulfilled; meanwhile the <Suspense> boundary above it shows a loading state (What’s new in React 19 - Vercel) (What’s new in React 19 - Vercel). Once the data is ready, the Cart items list is rendered. The use() API basically gives first-class support to the “suspend while loading” pattern without needing a custom hook or effect. Importantly, it’s safe to call inside loops, conditions, or any component logic (unlike Hooks) because it’s not actually a Hook – it’s more like a directive to React’s rendering workflow (What’s new in React 19 - Vercel). Errors thrown by the promise will be caught by the nearest Error Boundary, and the nearest Suspense boundary will handle the loading state (What’s new in React 19 - Vercel). This greatly simplifies data-fetching components and was a much-anticipated addition for concurrent React.
Transitions with Async Work (Actions): React 19 extends the idea of transitions (introduced in React 18 via useTransition) to better handle asynchronous state updates. Previously, developers could mark state updates as non-blocking with startTransition, but managing side-effects (like fetching data or posting forms) still required manual isLoading flags, try/catch for errors, etc. Now, React 19’s new Actions API (detailed in the next section) integrates with transitions. Specifically, you can wrap an async function in startTransition and React will automatically track its pending state and result (React v19 – React) (React v19 – React). The moment you start an async transition, React sets isPending = true for you and, when it completes, sets it to false and either applies the result or surfaces an error to an Error Boundary (React v19 – React). This improvement means smoother UI updates during async events – for example, when a user submits a form, you can navigate or show a success message immediately after the promise resolves, with React handling the loading indicator in the meantime (no extra state needed). In summary, React’s concurrent rendering now naturally accommodates real async tasks, not just state updates.
useDeferredValue Improvements: The useDeferredValue Hook, which lets you defer updating a value until later to keep the UI responsive, got a small but handy update. You can now provide an initialValue to useDeferredValue (React v19 – React) (React v19 – React). This initial value will be returned on the first render, and then the Hook triggers a deferred re-render with the actual value. For example: const deferred = useDeferredValue(value, initialValue). This is useful for scenarios like search-as-you-type: you might want to show no results (or some default) initially, then show results once the search query has had time to be processed. By providing an initialValue, you avoid unnecessary undefined or placeholder states on first render.
Concurrent Rendering in Testing: Although not directly a developer feature, it’s worth noting that React’s test utilities (like react-test-renderer) now default to concurrent rendering mode in React 19 (React 19 Upgrade Guide – React). This means if you use React’s testing tools, they simulate the concurrent behavior more accurately. It’s part of a broader shift to ensure devs test how their code runs in reality, especially with features like Suspense. Along with this, many legacy test utils have been removed or moved (see Breaking Changes) to encourage modern testing practices (like using React Testing Library which is concurrency-friendly).

Overall, React 19’s concurrent mode becomes more powerful – letting you suspend in components, handle async UI flows more naturally, and fine-tune transitional states – all contributing to UIs that stay responsive and predictable even as data loads or changes.

Date: 27 Mar 2025