T
TanStack•8mo ago
like-gold

Suspense bug: Fallback not triggering

In this example from the docs, why wouldn't I ever see the fallback <h1>Loading projects...</h1>? https://tanstack.com/query/latest/docs/framework/react/examples/suspense
React TanStack Query Suspense Example | TanStack Query Docs
An example showing how to implement Suspense in React using TanStack Query.
2 Replies
sensitive-blue
sensitive-blue•8mo ago
Hi Mimameid, I believe this example is wrong. On the initial render, React.Suspsense's content successfully renders, it just renders null. So when Project or Projects suspend, react continues displaying the most recent successful render (null) until data has been fetched. To fix this, move the null case outside of the React.Suspense component: 
{showProjects ? (
  <React.Suspense fallback={<h1>Loading projects...</h1>}>
    {activeProject ? (
      <Project
        activeProject={activeProject}
        setActiveProject={setActiveProject}
      />
    ) : (
      <Projects setActiveProject={setActiveProject} />
    )}
  </React.Suspense>
) : null}
{showProjects ? (
  <React.Suspense fallback={<h1>Loading projects...</h1>}>
    {activeProject ? (
      <Project
        activeProject={activeProject}
        setActiveProject={setActiveProject}
      />
    ) : (
      <Projects setActiveProject={setActiveProject} />
    )}
  </React.Suspense>
) : null}
sensitive-blue
sensitive-blue•8mo ago
Filed a bug report for this here: https://github.com/TanStack/query/issues/9019
GitHub
Suspense example in docs is incorrect · Issue #9019 · TanStack/query
Describe the bug A user on discord noticed that the fallback never renders for this example: https://tanstack.com/query/latest/docs/framework/react/examples/suspense I believe this example is wrong...

Did you find this page helpful?