React · Senior · Question 53 of 75
Why does this component suspend forever (or refetch endlessly)?
function Profile({ id }) {
const user = use(fetch(`/api/users/${id}`).then((r) => r.json()));
return <h1>{user.name}</h1>;
}- ✓Correct answer: A new promise is created on every render;
useneeds a cached/stable promise (from a framework, a cache or a parent) - 2
usecan't be called in client components - 3
fetchisn't allowed insideuse
Explanation
After suspending, React re-renders the component, which creates another promise. Pass a promise from a Server Component, a data library or a cache keyed by id.