How to fetch with use hook in React

State
By Jad Joubran · 
Last updated Feb 29, 2024
// Must be on React 18.3 or React 19 (when released)
import { Suspense, use } from "react";

const promise = fetch(
  "https://jsonplaceholder.typicode.com/todos/1"
).then(response => response.json());

function Todo() {
  const todo = use(promise);

  return <h1>{todo.title}</h1>;
}

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