react-query with Suspense confusion

[gper2020]

Hello, could you please help me with the following?
Regarding using react-query with Suspence.

Does React's Suspense
a) mounts the component ( and its react-query ), then, unmounts the component whilst fetching takes place , then mounts again the component when data is available?
or
b) mounts the component ( and its react-query ), then, sets its CSS "display: none", then removes the "display: none" once data is available?

I am asking because I seem to find conflicting info :

• Suspense sets "display: none"
  React.Suspense provide a lifecycle so components can handle the display:none removal facebook/react#14536
  "React.Suspense mounts its children with a display: none style if a promise is thrown. Once the thrown promise is resolved, React removes the display: none style."

• Suspense unmounts
  When using useQuery with suspense true option, staleTime defaults to 1000ms right? #5162
  "...because of how suspense works. suspense unmounts the component and shows the suspense fallback component instead. Then, it re-mounts the component once it's ready."

If your answer is "it unmounts the component" , can you please explain to me why I am not seeing "UNMOUNTS" in the following code? (I only see "MOUNTS").
(code is a slight modification of : https://codesandbox.io/s/tannerlinsley-react-query-simple-1wpf6 )

import React,{Suspense, useEffect} from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import axios from "axios";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<p>Loading...</p>}>
      <Example />
      </Suspense>
    </QueryClientProvider>
  );
}

function Example() {
  useEffect(()=>{
    console.log("MOUNTS")

    return ()=>{
      console.log("UNMOUNTS")
    }
  },[]);

  const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    axios.get(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.data)
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In other words, could you please clarify the internal workings of react's Suspense and how this affects react-query ?
I am trying to debug an issue where a react-query within a component wrapped in Suspense spawns a fetch for a 2nd time after, like , one or two seconds from the 1st fetch but none of the following seems to happen to justify the react-query fetching a second time :

Stale queries are refetched automatically in the background when:
New instances of the query mount
The window is refocused
The network is reconnected.
The query is optionally configured with a refetch interval.

(In addition , the query is not getting enabled/disabled and there is no refetchInterval set either)

Btw, using react-query dev-tools , I see that in my real life situation the query has a staleTime of 1 second. If I increase this amount a bit , then the 2nd fetching does not take place.

Many thanks for your time!

[TkDodo]

it doesn't use display:none, it also technically doesn't "unmount" - it interrupts rendering.

If your answer is "it unmounts the component" , can you please explain to me why I am not seeing "UNMOUNTS" in the following code? (I only see "MOUNTS").

you see none of the two, here's what happens:

• component starts to render
• react-query throws the promise
• component suspends
• queryFn finishes fetching
• component starts render process from scratch
• now it finishes rendering with data
• NOW you see the MOUNTS text.

you can see this in your example if you add more log statements: https://codesandbox.io/s/objective-bogdan-gff8c5?file=/src/index.js

so when you suspend, no effect runs, because effects run "after" rendering, and with suspense, you never get that far.

[gper2020]

@TkDodo thank you so much for your detailed reply and for your time!