TanStack · KATT · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git a/.gitignore b/.gitignore
@@ -28,7 +28,6 @@ size-plugin.json
 stats-hydration.json
 stats.json
 stats.html
-.vscode/settings.json
 
 *.log
 *.tsbuildinfo

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}
diff --git a/examples/react/transition/.eslintrc b/examples/react/transition/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:react/jsx-runtime", "plugin:react-hooks/recommended"]
+}
diff --git a/examples/react/transition/.gitignore b/examples/react/transition/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/react/transition/README.md b/examples/react/transition/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `pnpm install`
+- `pnpm dev`
diff --git a/examples/react/transition/index.html b/examples/react/transition/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>TanStack Query React Suspense Example App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/transition/package.json b/examples/react/transition/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-react-transition",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.62.8",
+    "@tanstack/react-query-devtools": "^5.62.8",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "5.7.2",
+    "vite": "^5.3.5"
+  }
+}
diff --git a/examples/react/transition/public/emblem-light.svg b/examples/react/transition/public/emblem-light.svg
diff --git a/examples/react/transition/src/index.tsx b/examples/react/transition/src/index.tsx
@@ -0,0 +1,102 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query'
+import { Suspense, use, useState, useTransition } from 'react'
+import ReactDOM from 'react-dom/client'
+
+const Example1 = ({ value }: { value: number }) => {
+  const { isFetching, promise } = useQuery({
+    queryKey: ['1' + value],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return '1' + value
+    },
+  })
+  const data = use(promise)
+
+  return (
+    <div>
+      {data} {isFetching ? 'fetching' : null}
+    </div>
+  )
+}
+
+const Example2 = ({ value }: { value: number }) => {
+  const { promise, isFetching } = useQuery({
+    queryKey: ['2' + value],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+      return '2' + value
+    },
+    // placeholderData: keepPreviousData,
+  })
+
+  const data = use(promise)
+
+  return (
+    <div>
+      {data} {isFetching ? 'fetching' : null}
+    </div>
+  )
+}
+
+const SuspenseBoundary = () => {
+  const [state, setState] = useState(-1)
+  const [isPending, startTransition] = useTransition()
+
+  return (
+    <div>
+      <h1>Change state with transition</h1>
+      <div>
+        <button
+          onClick={() =>
+            startTransition(() => {
+              setState((s) => s - 1)
+            })
+          }
+        >
+          Decrease
+        </button>
+      </div>
+      <h2>State:</h2>
+      <ul>
+        <li>last state value: {state}</li>
+        <li>
+          transition state: {isPending ? <strong>pending</strong> : 'idle'}
+        </li>
+      </ul>
+      <h2>2. 1 Suspense + startTransition</h2>
+      <Suspense fallback="fallback 1">
+        <Example1 value={state}></Example1>
+      </Suspense>
+      <h2>2.2 Suspense + startTransition</h2>
+      <Suspense fallback="fallback 2">
+        <Example2 value={state}></Example2>
+      </Suspense>
+    </div>
+  )
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      experimental_prefetchInRender: true,
+      staleTime: 10 * 1000,
+    },
+  },
+})
+
+const App = () => {
+  return (
+    <div>
+      <QueryClientProvider client={queryClient}>
+        <SuspenseBoundary />
+      </QueryClientProvider>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root') as HTMLElement
+ReactDOM.createRoot(rootElement).render(<App />)
diff --git a/examples/react/transition/tsconfig.json b/examples/react/transition/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "eslint.config.js"]
+}
diff --git a/examples/react/transition/vite.config.ts b/examples/react/transition/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/packages/query-core/src/queryObserver.ts b/packages/query-core/src/queryObserver.ts
@@ -698,11 +698,11 @@
         includedProps.add('error')
       }
 
-      return Object.keys(this.#currentResult).some((key) => {
+      return [...includedProps].some((key) => {
         const typedKey = key as keyof QueryObserverResult
         const changed = this.#currentResult[typedKey] !== prevResult[typedKey]
 
-        return changed && includedProps.has(typedKey)
+        return changed
       })
     }