[]previous and next page

Common mistakes

Common mistakes in the Suspense and resources guide.

For agentsUpdated
  • Reading the resource where no boundary encloses it and expecting a loading UI. The read returns undefined. Add a Suspense around the reader, or branch on data.loading / data.state.
  • Putting the Suspense around useResource instead of around data(). The boundary that counts encloses the read.
  • Suspense inside the ErrorBoundary fallback path. Put ErrorBoundary outside Suspense, so failures replace the loading UI too.
  • Expecting the fallback on refetch. After the first load the old value stays; use data.loading for a spinner.
  • Using 0 or "" to mean "do not fetch". Only false, null and undefined skip.
  • Ignoring info.signal. The late result is dropped either way, but the request keeps running.
  • Creating resources in event handlers. A resource needs an owner. Create it in the component body and call refetch() from the handler.
  • Unkeyed resources that move between server and client. Give useResource a key when server data must find its resource.