useSuspenseQuery and isFetching

[Apologies that this question was mistakenly posted first in the react-router channel. Moving here now.]

According to the React docs, when you wrap part of your application in a Suspense component and specify a

fallback

fallback

fallback

fallback, then the fallback component will be rendered until all children have completed their data fetching. In other words, if queries in child components are in a fetching state, then the fallback is rendered instead of the children. When child components have finished fetching, then they are rendered.

That being so, I'm confused about the

useSuspenseQuery

useSuspenseQuery

example mentioned in the Tanstack docs and in particular the

isFetching

isFetching

isFetching

isFetching status. The component in the

Project.jsx

Project.jsx

Project.jsx

Project.jsx file is defined like so:

export default function Project({ activeProject, setActiveProject }) {
  const { data, isFetching } = useSuspenseQuery({... })

  return (
    <div>
      <Button onClick={() => setActiveProject(null)}>Back</Button>
      <h1>
        {activeProject} {isFetching ? <Spinner /> : null}
      </h1>
      {data ? (
        <div>
          <p>forks: {data.forks_count}</p>
          <p>stars: {data.stargazers_count}</p>
          <p>watchers: {data.watchers}</p>
        </div>
      ) : null}
      <br />
      <br />
    </div>
  )
}

export default function Project({ activeProject, setActiveProject }) {
  const { data, isFetching } = useSuspenseQuery({... })

  return (
    <div>
      <Button onClick={() => setActiveProject(null)}>Back</Button>
      <h1>
        {activeProject} {isFetching ? <Spinner /> : null}
      </h1>
      {data ? (
        <div>
          <p>forks: {data.forks_count}</p>
          <p>stars: {data.stargazers_count}</p>
          <p>watchers: {data.watchers}</p>
        </div>
      ) : null}
      <br />
      <br />
    </div>
  )
}

export default function Project({ activeProject, setActiveProject }) {
  const { data, isFetching } = useSuspenseQuery({... })

  return (
    <div>
      <Button onClick={() => setActiveProject(null)}>Back</Button>
      <h1>
        {activeProject} {isFetching ? <Spinner /> : null}
      </h1>
      {data ? (
        <div>
          <p>forks: {data.forks_count}</p>
          <p>stars: {data.stargazers_count}</p>
          <p>watchers: {data.watchers}</p>
        </div>
      ) : null}
      <br />
      <br />
    </div>
  )
}

export default function Project({ activeProject, setActiveProject }) {
  const { data, isFetching } = useSuspenseQuery({... })

  return (
    <div>
      <Button onClick={() => setActiveProject(null)}>Back</Button>
      <h1>
        {activeProject} {isFetching ? <Spinner /> : null}
      </h1>
      {data ? (
        <div>
          <p>forks: {data.forks_count}</p>
          <p>stars: {data.stargazers_count}</p>
          <p>watchers: {data.watchers}</p>
        </div>
      ) : null}
      <br />
      <br />
    </div>
  )
}

Here we see the

useSuspenseQuery

useSuspenseQuery

returning

{data, isFetching}

{data, isFetching}

{data, isFetching}

{data, isFetching}, and the

isFetching

isFetching

isFetching

isFetching boolean is being used in the jsx definition. But according to the React docs, if the query is indeed in a fetching state, this component will never be rendered - its parent suspense component will instead be rendering its fallback, and the child component will only be rendered when fetching has finished. So