Unexpected behaviour with Suspense, Outlet and React.use()

[luisdlopez]

I'm oversimplifying the code but I think you'll get the idea. I can provide more information if needed.

I have a root that looks like the following:

<Suspense fallback={<Loading />}>
  <Outlet />
</Suspense>

In one of my route modules, I am using the clientLoader to return a promise (from a fetch that, for this example, will take some seconds to resolve). Then, the Component gets the loaderData, and inside of, I call the data using React.use() to trigger the Suspense fallback while we wait for the data, like so:

export async function clientLoader({ params }: Route.ClientLoaderArgs) {
  return {
    query: fetch("..."), // this fetch returns a promise that is either pending or fulfilled - I swear
  }
}

export default function MyComponent({ loaderData }: Route.ComponentProps) {
  const { query } = loaderData;
  const data = React.use(query); // this right here prevents the rendering until the promise is fulfilled - as expected

  return <div>...</div>;
}

Now, when navigating from any page to this one, the fallback is not showing, even though React.use() is working as expected (and of course, this all works on the first load - but here, we are not dealing with any stale data or anything like that).

To give you another example, if I change MyComponent to include an additional Suspense, the whole thing works:

export default function MyComponent({ loaderData }: Route.ComponentProps) {
  const { query } = loaderData;

  return (
    <Suspense fallback={<Loading />}>
      <ChildComponent query={query} />
    </Suspense>
  );
}

function ChildComponent({ query }) {
  const data = React.use(query);

  return <div>...</div>;
}

The fallback properly shows while the promise is resolved.

Is this normal? Shouldn't the Suspense around the Outlet catch this?

[daviddanielng]

This is something they broke in version 7, i am going back to 6.

Wasted all that efforts upgrading to 7.

[daviddanielng]

I think i have found the solution, read this section of the docs

We stuck with Await if we do want to create extra components.

[joesaunderson]

Also seeing this behaviour in V7, the Outlet seems to be catching the suspended element?

We are not using the loader from React Router, but another suspending element... this doesn't seem like the best behaviour?

[sergiodxa]

This is an expected behavior of React, not React Router.

When a Suspense boundary goes from pending to resolved, it won't go back to pending even if the content has a new pending promise. Instead the Suspense boundary will keep the previous UI in place until the new promise is resolved.

To prevent this behavior, you have to force the Suspense boundary to mount again, so it's a new one without a resolved state. A simple way to do it for navigations is to pass the location.key as the key prop.

let location = useLocation()
return (
  <Suspense key={location.key} fallback={<Loading />}>
    <Outlet />
  </Suspense>
)

The location.key change on every navigation so it will help force the re-mounting of the component.

[luisdlopez]

Thank you so much for this!