How does the new use() hook improve working with Promises?

The new use() hook in React 19 lets you “await” promises directly inside components during rendering, simplifying async data handling by eliminating useEffect and extra state logic.

It improves working with promises by allowing components to suspend rendering until the promise resolves, showing fallback UI via Suspense automatically. This leads to cleaner code, fewer re-renders, and smoother async workflows in React.

Code

import React, { Suspense, use } from 'react';

function Products() {
  const products = use(fetch('/api/products').then(res => res.json()));
  return <ProductList products={products} />;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Products />
    </Suspense>
  );
}