diff --git a/examples/visualization/src/app/layout.tsx b/examples/visualization/src/app/layout.tsx
index 2ce8bfa4f..649e13e50 100644
--- a/examples/visualization/src/app/layout.tsx
+++ b/examples/visualization/src/app/layout.tsx
@@ -25,21 +25,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             <li>
               <details>
                 <summary>@suspensive/react</summary>
-                <li>
-                  <Link href="/react/Suspense/clientOnly">{`<Suspense clientOnly/>`}</Link>
-                </li>
-                <li>
-                  <Link href="/react/DevMode">{`<DevMode/>`}</Link>
-                </li>
                 <li>
                   <Link href="/react/Delay">{`<Delay/>`}</Link>
                 </li>
                 <li>
                   <Link href="/react/ErrorBoundary/shouldCatch">{`<ErrorBoundary/>`} shouldCatch prop</Link>
                 </li>
-                <li>
-                  <Link href="/react/SuspensiveError">SuspensiveError (internal api)</Link>
-                </li>
                 <li>
                   <Link href="/react/zodSearchParams">zod: no param</Link>
                 </li>
diff --git a/examples/visualization/src/app/react-query/SuspenseQuery/page.tsx b/examples/visualization/src/app/react-query/SuspenseQuery/page.tsx
index 74b28c231..ecf653de0 100644
--- a/examples/visualization/src/app/react-query/SuspenseQuery/page.tsx
+++ b/examples/visualization/src/app/react-query/SuspenseQuery/page.tsx
@@ -1,46 +1,50 @@
 'use client'
 
 import { ErrorBoundary, Suspense } from '@suspensive/react'
-import { SuspenseQuery } from '@suspensive/react-query'
+import { SuspenseQuery, queryOptions, usePrefetchQuery } from '@suspensive/react-query'
 import axios from 'axios'
 import { Spinner } from '~/components/uis'
 
+const query = {
+  user: (userId: number) =>
+    queryOptions({
+      queryKey: ['users', userId],
+      queryFn: () =>
+        axios
+          .get<{
+            id: number
+            username: string
+            age: number
+          }>(`https://dummyjson.com/users/${userId}`)
+          .then(({ data }) => data),
+    }),
+  products: () =>
+    queryOptions({
+      queryKey: ['products'],
+      queryFn: () =>
+        axios
+          .get<{
+            products: Array<{
+              id: number
+              title: string
+              price: number
+            }>
+          }>(`https://dummyjson.com/products`)
+          .then(({ data }) => data),
+    }),
+}
+
 export default function Page() {
   const userId = 1
+  usePrefetchQuery(query.user(userId))
+  usePrefetchQuery(query.products())
 
   return (
     <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
-      <Suspense clientOnly fallback={<Spinner />}>
+      <Suspense clientOnly fallback={<ExpensiveSpinner ms={2000} />}>
         <div>
-          <SuspenseQuery
-            queryKey={['users', userId]}
-            queryFn={() =>
-              axios
-                .get<{
-                  id: number
-                  username: string
-                  age: number
-                }>(`https://dummyjson.com/users/${userId}`)
-                .then(({ data }) => data)
-            }
-          >
-            {({ data: user }) => <h1>{user.username}</h1>}
-          </SuspenseQuery>
-          <SuspenseQuery
-            queryKey={['products']}
-            queryFn={() =>
-              axios
-                .get<{
-                  products: Array<{
-                    id: number
-                    title: string
-                    price: number
-                  }>
-                }>(`https://dummyjson.com/products`)
-                .then(({ data }) => data)
-            }
-            select={(data) => data.products}
-          >
+          <SuspenseQuery {...query.user(userId)}>{({ data: user }) => <h1>{user.username}</h1>}</SuspenseQuery>
+          <SuspenseQuery {...query.products()} select={(data) => data.products}>
             {({ data: products }) => (
               <div>
                 {products.map((product) => (
@@ -54,3 +58,11 @@ export default function Page() {
     </ErrorBoundary>
   )
 }
+
+const ExpensiveSpinner = ({ ms }: { ms: number }) => {
+  if (typeof window !== 'undefined') {
+    const start = Date.now()
+    while (Date.now() - start < ms) {}
+  }
+  return <Spinner />
+}
diff --git a/examples/visualization/src/app/react/DevMode/page.tsx b/examples/visualization/src/app/react/DevMode/page.tsx
deleted file mode 100644
index fd778c526..000000000
--- a/examples/visualization/src/app/react/DevMode/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client'
-
-import { ErrorBoundary, type ErrorBoundaryFallbackProps, Suspense } from '@suspensive/react'
-import { Area, Box, Button, Spinner } from '~/components/uis'
-
-export default function Page() {
-  return (
-    <Area title="devMode">
-      <Area title="<Suspense devMode={{ showFallback: true }} />">
-        <Suspense fallback={<Spinner />} devMode={{ showFallback: true }}>
-          <Box.Success>children</Box.Success>
-        </Suspense>
-      </Area>
-
-      <Area title="<ErrorBoundary devMode={{ showFallback: true }} />">
-        <ErrorBoundary fallback={ErrorBoundaryFallback} devMode={{ showFallback: true }}>
-          <Box.Default>children</Box.Default>
-        </ErrorBoundary>
-      </Area>
-      <Area title="<ErrorBoundary devMode={{ showFallback: { after: 2000 } }} />">
-        <ErrorBoundary fallback={ErrorBoundaryFallback} devMode={{ showFallback: { after: 2000 } }}>
-          <Box.Default>children</Box.Default>
-        </ErrorBoundary>
-      </Area>
-    </Area>
-  )
-}
-
-const ErrorBoundaryFallback = ({ error, reset }: ErrorBoundaryFallbackProps) => (
-  <Box.Error>
-    {error.message}
-    <Button onClick={reset}>↻</Button>
-  </Box.Error>
-)
diff --git a/examples/visualization/src/app/react/Suspense/clientOnly/page.tsx b/examples/visualization/src/app/react/Suspense/clientOnly/page.tsx
deleted file mode 100644
index 57f15e1a7..000000000
--- a/examples/visualization/src/app/react/Suspense/clientOnly/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import { Suspense } from '@suspensive/react'
-import { Suspense as ReactSuspense, type SuspenseProps, useEffect, useState } from 'react'
-
-export default function Page() {
-  return (
-    <>
-      <Suspense clientOnly fallback={<RenderCounter name="Suspensive's Suspense.fallback" />}>
-        <RenderCounter name="Suspensive's Suspense" />
-      </Suspense>
-
-      <SuspenseLegacy fallback={<RenderCounter name="Suspensive's SuspenseLegacy.fallback" />}>
-        <RenderCounter name="Suspensive's SuspenseLegacy" />
-      </SuspenseLegacy>
-    </>
-  )
-}
-
-const RenderCounter = ({ name }: { name: string }) => {
-  console.count(`${name}(RenderCounter) render count`)
-  return <>{name}</>
-}
-
-const SuspenseLegacy = (props: SuspenseProps) => {
-  const [isMounted, setIsMounted] = useState(false)
-
-  useEffect(() => {
-    setIsMounted(true)
-  }, [])
-
-  return isMounted ? <ReactSuspense {...props} /> : props.fallback
-}
diff --git a/examples/visualization/src/app/react/SuspensiveError/page.tsx b/examples/visualization/src/app/react/SuspensiveError/page.tsx
deleted file mode 100644
index c6862da4a..000000000
--- a/examples/visualization/src/app/react/SuspensiveError/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import { Delay, ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
-import React from 'react'
-
-export default function Page() {
-  return (
-    <ErrorBoundary
-      fallback={({ error, reset }) => {
-        console.log({ error })
-
-        return (
-          <button onClick={reset} className="text-red-50">
-            {error.message}
-          </button>
-        )
-      }}
-    >
-      <ErrorBoundary
-        fallback={({ error, reset }) => {
-          console.log(error)
-
-          return <button onClick={reset}>{error.message}</button>
-        }}
-      >
-        <Delay fallback="delaying..." ms={1000}>
-          <Contents />
-        </Delay>
-      </ErrorBoundary>
-    </ErrorBoundary>
-  )
-}
-
-const Contents = () => {
-  useErrorBoundaryFallbackProps()
-
-  return <>Contents</>
-}