useSuspense: true crashes on this example

[poc7667]

Hi,

I have this example here https://github.com/poc7667/BuggyReactSuspense/blob/main/src/App.js
I didn't provide the suspense fallback view on purpose, because I want React hanging the previous view while doing data-load.

But don't get why the route updates, view component update will crash this app, any idea? (might not related to react-query)

Thanks

run app on localhost:3000,

http://localhost:3000/users -> http://localhost:3000/products (ok)
http://localhost:3000/products -> http://localhost:3000/users (crash)

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false,
            retry: false,
            staleTime: Infinity,
            // Avoid cache
            cacheTime: 0,
            suspense: true
        }
    }
});

        <ErrorBoundary FallbackComponent={errorBoundaryFallback} >
            <div className="App">
                <SideBar></SideBar>
                <Routes>
                    <Route element={<Users/>} path={'users/*'}/>
                    <Route element={<Products/>} path={'products/*'}/>
                </Routes>
            </div>
        </ErrorBoundary>

/**
 * Crash
**/
function Users({time}) {
    const {data, isSuccess} = useQuery(["lala2"], fetchData);

function Products({time}) {
    const {data, isSuccess} = useQuery(["lala"], fetchData);

/**
 * No Crash but using the same query cached.
**/
function Users({time}) {
    const {data, isSuccess} = useQuery(["lala"], fetchData);

function Products({time}) {
    const {data, isSuccess} = useQuery(["lala"], fetchData);

[TkDodo]

You can't use suspense without a suspense component / boundary.

[poc7667]

Thanks for the response.
*The scenerio is to stay in the current component until next component's data is ready.

• All data-fetches are using react-query and encapsulate in each component, we don't want to move the data fetch logic outside of its component.

• By using suspense tag, we need to provide fallback view, our fallback view is current component plus loading spinner, which seems not possible unless we manually cache the current component DOM while doing the data-fetch for next component?

    ┌────────────────────────┐
    │Current component view  │
    └─┬──────────────────────┘
      │  route transition triggered
      │
      │  start loading new  component data
      │
      │  all data fetch are encapulated in component
      ▼
    ┌─────────────────────────
    │Current component view Plus loading spinner
    └─┬───────────────────────
      │
      │new component data is ready
      │
      │
   ┌──▼───────────────────────┐
   │ Next component view      │
   └──────────────────────────┘

[poc7667]

btw, is there any way to force React-dom go to this branch?
which won't throw an error and let the view freezed in the current component until the next view data is ready.

react-dom.development.js

if (!includesSyncLane(rootRenderLanes)) {
        // This is not a sync update. Suspend. Since we're not activating a
        // Suspense boundary, this will unwind all the way to the root without
        // performing a second pass to render a fallback. (This is arguably how
        // refresh transitions should work, too, since we're not going to commit
        // the fallbacks anyway.)
        //
        // This case also applies to initial hydration.
        attachPingListener(root, wakeable, rootRenderLanes);
        renderDidSuspendDelayIfPossible();
        return;
} 

[TkDodo]

We do have an example in the docs that does just that, please have a look: https://tanstack.com/query/v4/docs/examples/react/suspense

• click show projects
• then, click on a project.
  • this uses startTransition to put the button into a pending state while the query is being fetched, so the old screen stays visible until data comes in.

[poc7667]

Yes, but this requires move out the data fetch logic to the outside and also need to do some changes with react-router-dom. because in this case, the loading component can be only triggered from the button click.
But in the real-world case, the new loading component could be triggered from button click, and ui interactions, or URL change.

Thanks for this info thought.... :)

[TkDodo]

I think you'd put the route transition into startTransition then. Anyways, startTransition is the way to make the component not suspend. It's mentioned in the react docs:

Updates in a transition will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.

Maybe you can show a codesandbox example of what you mean?

[poc7667]

Will try to make some workable sandbox code.
an expected behaviour is like below

fade-out-effect.mp4

Still not clear how to apply the startTransition in router as the way you mentioned, any other references?

<Routes>
        <Route element={<PageA/>} path={'pageA'} />
        <Route element={<PageB/>} path={'pageB'} />
</Routes>

pageA and pageB are encapusulating data-fetching logic in it place, should not spread data fetching to routes or parent components.
Inside pageA and pageB we use React query with suspense:true option to fetch data, which will throw pending promising when data is fetching