react-doctor/no-derived-use

Don't pass a promise created during render into use(); create it in a Server Component (or a stable cache) so its reference stays stable across renders

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires when use(...) receives a promise constructed during render in the same Client Component — e.g. use(fetch(url).then(r => r.json())), use(fetchData()), use(new Promise(...)), or use(somePromise) where somePromise is assigned from a fresh call earlier in the render body. The docs state that "Promises created in Client Components are recreated on every render," so such a promise is a new reference each render and the component can re-suspend instead of committing the resolved value. False positive: a promise that is stable across renders is correct and should be suppressed — chiefly one passed in as a prop from a Server Component (which the docs say is "stable across re-renders"), but also one returned from a stable cache or a data-fetching layer that dedupes requests so the same promise reference is returned for the same input.

Fix prompt

Use this once validation confirms the diagnostic is real.

Make the promise stable instead of constructing a new one on every render. The docs' primary recommendation is to create the promise in a Server Component and pass it down — export default function Page() { const dataPromise = fetchData(); return <Client dataPromise={dataPromise} /> } — then call use(dataPromise) in the child, since promises passed from a Server Component are stable across re-renders. For a pure client tree, get the promise from a request-deduping or caching layer (e.g. a data library like React Query or SWR, or a framework's cache) that returns the same reference for the same input, rather than a hand-rolled cache that never invalidates. See https://react.dev/reference/react/use

Previous pagereact-doctor/no-derived-state-effectNext pagereact-doctor/no-derived-useState