Suspense example in docs is incorrect #9019
Description
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. 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}
Your minimal, reproducible example
Original example:
https://tanstack.com/query/latest/docs/framework/react/examples/suspense?panel=sandbox
Fixed example:
https://stackblitz.com/edit/tanstack-query-4yma8xjz?file=src%2Findex.tsx
Steps to reproduce
- Navigate to this example in your browser: https://tanstack.com/query/latest/docs/framework/react/examples/suspense
- Click on the "Interactive Sandbox" tab
- Click on the "Show projects" button
Expected: The fallback (Loading projects...) is rendered while the query is loading
Actual: null is rendered while the query is loading.
Expected behavior
As a developer, I expected the fallback (Loading projects...) to render. Instead, nothing (null) was rendered.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
OS: MacOS
Browser: Chrome
Browser Version: 135.0.7049.85
Tanstack Query adapter
react-query
TanStack Query version
v5.74.3
TypeScript version
5.8.3
Additional context
No response