feat(*): support react 19 (#1389)

close #929 

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

.changeset/twelve-eagles-rule.md

@@ -0,0 +1,11 @@
+---
+"@suspensive/jotai": patch
+"@suspensive/react-dom": patch
+"@suspensive/react-native": patch
+"@suspensive/react-query-4": patch
+"@suspensive/react-query-5": patch
+"@suspensive/react-query": patch
+"@suspensive/react": patch
+---
+
+feat(*): support react 19

docs/suspensive.org/package.json

@@ -29,21 +29,21 @@
     "@tanstack/react-query-devtools": "^4.36.1",
     "codehike": "^1.0.4",
     "d3": "^7.9.0",
-    "framer-motion": "^11.13.1",
+    "motion": "^11.13.5",
     "next": "catalog:",
-    "nextra": "^3.2.4",
-    "nextra-theme-docs": "^3.2.4",
-    "react": "catalog:react18",
-    "react-dom": "catalog:react-dom",
+    "nextra": "^3.2.5",
+    "nextra-theme-docs": "^3.2.5",
+    "react": "catalog:react19",
+    "react-dom": "catalog:react19",
     "remark-sandpack": "^0.0.5",
     "sharp": "catalog:",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@suspensive/eslint-config": "workspace:*",
     "@types/d3": "^7.4.3",
-    "@types/react": "catalog:react18",
-    "@types/react-dom": "catalog:react-dom",
+    "@types/react": "catalog:react19",
+    "@types/react-dom": "catalog:react19",
     "autoprefixer": "catalog:",
     "postcss": "catalog:",
     "prettier-plugin-tailwindcss": "catalog:",

docs/suspensive.org/src/components/HomePage.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import { useRouter } from 'nextra/hooks'
 import { Link } from 'nextra-theme-docs'

docs/suspensive.org/src/components/Scrollycoding.tsx

@@ -36,17 +36,15 @@ export class SmoothPre extends Component<CustomPreProps> {
   }
 
   getSnapshotBeforeUpdate() {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return getStartingSnapshot(this.ref.current!)
+    return getStartingSnapshot(this.ref.current)
   }
 
   componentDidUpdate(
     prevProps: never,
     prevState: never,
     snapshot: TokenTransitionsSnapshot
   ) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const transitions = calculateTransitions(this.ref.current!, snapshot)
+    const transitions = calculateTransitions(this.ref.current, snapshot)
     transitions.forEach(({ element, keyframes, options }) => {
       const { translateX, translateY, ...kf } = keyframes as any
       if (translateX && translateY) {

docs/suspensive.org/theme.config.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'nextra/hooks'

examples/next-streaming-react-query/package.json

@@ -18,14 +18,14 @@
     "@tanstack/react-query-devtools": "catalog:react-query5",
     "@tanstack/react-query-next-experimental": "catalog:react-query5",
     "next": "catalog:",
-    "react": "catalog:react18",
-    "react-dom": "catalog:react-dom",
+    "react": "catalog:react19",
+    "react-dom": "catalog:react19",
     "sharp": "catalog:"
   },
   "devDependencies": {
     "@suspensive/eslint-config": "workspace:*",
-    "@types/react": "catalog:react18",
-    "@types/react-dom": "catalog:react-dom",
+    "@types/react": "catalog:react19",
+    "@types/react-dom": "catalog:react19",
     "autoprefixer": "catalog:",
     "postcss": "catalog:",
     "prettier-plugin-tailwindcss": "catalog:",

examples/react-native-playground/package.json

@@ -15,40 +15,40 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/vector-icons": "catalog:react-native",
-    "@react-navigation/bottom-tabs": "catalog:react-native",
-    "@react-navigation/native": "catalog:react-native",
+    "@expo/vector-icons": "catalog:react19",
+    "@react-navigation/bottom-tabs": "catalog:react19",
+    "@react-navigation/native": "catalog:react19",
     "@suspensive/react-native": "workspace:*",
-    "expo": "catalog:react-native",
-    "expo-blur": "catalog:react-native",
-    "expo-constants": "catalog:react-native",
-    "expo-font": "catalog:react-native",
-    "expo-haptics": "catalog:react-native",
-    "expo-linking": "catalog:react-native",
-    "expo-router": "catalog:react-native",
-    "expo-splash-screen": "catalog:react-native",
-    "expo-status-bar": "catalog:react-native",
-    "expo-symbols": "catalog:react-native",
-    "expo-system-ui": "catalog:react-native",
-    "expo-web-browser": "catalog:react-native",
-    "react": "catalog:react18",
-    "react-dom": "catalog:react-dom",
-    "react-native": "catalog:react-native",
-    "react-native-gesture-handler": "catalog:react-native",
-    "react-native-reanimated": "catalog:react-native",
-    "react-native-safe-area-context": "catalog:react-native",
-    "react-native-screens": "catalog:react-native",
-    "react-native-web": "catalog:react-native",
-    "react-native-webview": "catalog:react-native"
+    "expo": "catalog:react19",
+    "expo-blur": "catalog:react19",
+    "expo-constants": "catalog:react19",
+    "expo-font": "catalog:react19",
+    "expo-haptics": "catalog:react19",
+    "expo-linking": "catalog:react19",
+    "expo-router": "catalog:react19",
+    "expo-splash-screen": "catalog:react19",
+    "expo-status-bar": "catalog:react19",
+    "expo-symbols": "catalog:react19",
+    "expo-system-ui": "catalog:react19",
+    "expo-web-browser": "catalog:react19",
+    "react": "catalog:react19",
+    "react-dom": "catalog:react19",
+    "react-native": "catalog:react19",
+    "react-native-gesture-handler": "catalog:react19",
+    "react-native-reanimated": "catalog:react19",
+    "react-native-safe-area-context": "catalog:react19",
+    "react-native-screens": "catalog:react19",
+    "react-native-web": "catalog:react19",
+    "react-native-webview": "catalog:react19"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@types/jest": "^29.5.12",
-    "@types/react": "catalog:react18",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react": "catalog:react19",
+    "@types/react-test-renderer": "^19.0.0",
     "jest": "catalog:",
-    "jest-expo": "catalog:react-native",
-    "react-test-renderer": "18.3.1",
+    "jest-expo": "catalog:react19",
+    "react-test-renderer": "19.0.0",
     "typescript": "^5.7.2"
   },
   "jest": {

examples/visualization/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-  transpilePackages: ['@suspensive/react', '@suspensive/react-query'],
+  transpilePackages: ['@suspensive/react', '@suspensive/react-query-5'],
   experimental: {
     typedRoutes: true,
   },

examples/visualization/package.json

@@ -14,22 +14,22 @@
   "dependencies": {
     "@suspensive/react": "workspace:*",
     "@suspensive/react-dom": "workspace:*",
-    "@suspensive/react-query": "workspace:*",
-    "@tanstack/react-query": "catalog:react-query4",
-    "@tanstack/react-query-devtools": "catalog:react-query4",
+    "@suspensive/react-query-5": "workspace:*",
+    "@tanstack/react-query": "catalog:react-query5",
+    "@tanstack/react-query-devtools": "catalog:react-query5",
     "axios": "^1.7.9",
     "clsx": "catalog:",
     "next": "catalog:",
-    "react": "catalog:react18",
-    "react-dom": "catalog:react-dom",
+    "react": "catalog:react19",
+    "react-dom": "catalog:react19",
     "sharp": "catalog:",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@suspensive/eslint-config": "workspace:*",
     "@suspensive/tsconfig": "workspace:*",
-    "@types/react": "catalog:react18",
-    "@types/react-dom": "catalog:react-dom",
+    "@types/react": "catalog:react19",
+    "@types/react-dom": "catalog:react19",
     "autoprefixer": "catalog:",
     "postcss": "catalog:",
     "prettier-plugin-tailwindcss": "catalog:",

examples/visualization/src/app/react-dom/FadeIn/page.tsx

@@ -2,7 +2,8 @@
 
 import { ErrorBoundary, Suspense } from '@suspensive/react'
 import { FadeIn } from '@suspensive/react-dom'
-import { SuspenseQuery, queryOptions } from '@suspensive/react-query'
+import { SuspenseQuery } from '@suspensive/react-query-5'
+import { queryOptions } from '@tanstack/react-query'
 import axios from 'axios'
 import { delay } from '~/utils'
 

examples/visualization/src/app/react-query/SuspenseInfiniteQuery/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ErrorBoundary, Suspense } from '@suspensive/react'
-import { SuspenseInfiniteQuery } from '@suspensive/react-query'
+import { SuspenseInfiniteQuery } from '@suspensive/react-query-5'
 import axios from 'axios'
 import { Spinner } from '~/components/uis'
 
@@ -12,33 +12,25 @@ export default function Page() {
       <Suspense clientOnly fallback={<Spinner />}>
         <SuspenseInfiniteQuery
           queryKey={['users', authorId]}
-          queryFn={({ pageParam }) => {
-            const { limit, skip } = (pageParam ?? { limit: 5, skip: undefined }) as { limit: number; skip?: number }
-            return axios
+          queryFn={({ pageParam }) =>
+            axios
               .get<{
                 limit: number
                 skip: number
                 total: number
-                products: Array<{
-                  id: number
-                  title: string
-                  price: number
-                }>
-              }>(`https://dummyjson.com/products?limit=${limit}${skip ? `&skip=${skip}` : ''}&select=title,price`)
-              .then(({ data }) => ({
-                data,
-                pageParam: {
-                  limit: data.limit,
-                  skip: data.limit,
-                },
-              }))
-          }}
-          getNextPageParam={(lastPage) => lastPage.pageParam}
+                products: Array<{ id: number; title: string; price: number }>
+              }>(
+                `https://dummyjson.com/products?limit=${pageParam.limit}${pageParam.skip ? `&skip=${pageParam.skip}` : ''}&select=title,price`
+              )
+              .then(({ data }) => data)
+          }
+          initialPageParam={{ limit: 5, skip: undefined } as { limit: number; skip: number | undefined }}
+          getNextPageParam={(lastPage) => ({ limit: 5, skip: lastPage.skip + 5 })}
         >
           {({ data, fetchNextPage, hasNextPage, isFetchingNextPage }) => (
             <div>
-              {data.pages.map(({ data }) =>
-                data.products.map((product) => (
+              {data.pages.map((page) =>
+                page.products.map((product) => (
                   <div key={product.id}>
                     <h2>title: {product.title}</h2>
                     <p>price: {product.price}</p>
@@ -51,14 +43,10 @@ export default function Page() {
                   <Spinner />
                 ) : (
                   <button
+                    type="button"
                     disabled={isFetchingNextPage}
                     onClick={() => {
-                      fetchNextPage({
-                        pageParam: {
-                          limit: data.pages[data.pages.length - 1].data.limit,
-                          skip: data.pages[data.pages.length - 1].data.skip + 5,
-                        },
-                      })
+                      fetchNextPage({})
                     }}
                   >
                     load more

examples/visualization/src/app/react-query/SuspenseQuery/page.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { ErrorBoundary, Suspense } from '@suspensive/react'
-import { SuspenseQuery, queryOptions, usePrefetchQuery } from '@suspensive/react-query'
+import { SuspenseQuery } from '@suspensive/react-query-5'
+import { queryOptions, usePrefetchQuery } from '@tanstack/react-query'
 import axios from 'axios'
 import { Spinner } from '~/components/uis'
 

examples/visualization/src/app/react-query/page.tsx

@@ -1,14 +1,14 @@
 'use client'
 
 import { ErrorBoundary, ErrorBoundaryGroup, Suspense, wrap } from '@suspensive/react'
-import { SuspenseQuery, queryOptions } from '@suspensive/react-query'
-import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import { SuspenseQuery } from '@suspensive/react-query-5'
+import { queryOptions, useQueryErrorResetBoundary } from '@tanstack/react-query'
 import { Area, Box, Button, RejectedFallback, Spinner } from '~/components/uis'
 import { api } from '~/utils/api'
 
 const delayQuery = (id: number, { ms, percentage }: { ms: number; percentage: number }) =>
   queryOptions({
-    queryKey: ['@suspensive/react-query', 'delayQuery', id] as const,
+    queryKey: ['@suspensive/react-query-5', 'delayQuery', id] as const,
     queryFn: () => api.delay(ms, { percentage }),
   })
 

examples/visualization/src/app/react/ErrorBoundary/shouldCatch/page.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import { ErrorBoundary, Suspense } from '@suspensive/react'
-import { useSuspenseQuery } from '@suspensive/react-query'
-import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import { useQueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
 import { AxiosError, isAxiosError } from 'axios'
 import { Area, Box, Button } from '~/components/uis'
 import { api } from '~/utils'

examples/visualization/src/app/react/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { ErrorBoundary, ErrorBoundaryGroup, Suspense } from '@suspensive/react'
-import { SuspenseQuery, queryOptions } from '@suspensive/react-query'
-import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import { SuspenseQuery } from '@suspensive/react-query-5'
+import { queryOptions, useQueryErrorResetBoundary } from '@tanstack/react-query'
 import { Area, Box, Button, RejectedFallback, Spinner } from '~/components/uis'
 import { api } from '~/utils/api'
 

examples/visualization/src/app/react/zodSearchParams/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { wrap } from '@suspensive/react'
-import { useSuspenseQuery } from '@suspensive/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 import { useSearchParams } from 'next/navigation'
 import { ZodError, z } from 'zod'
 import { Spinner } from '~/components/uis'

examples/vite-react-18-suspense-prerender-siblings-problem/package.json

@@ -14,13 +14,13 @@
     "@tanstack/react-query": "catalog:react-query5",
     "@tanstack/react-query-devtools": "catalog:react-query5",
     "react": "catalog:react18",
-    "react-dom": "catalog:react-dom"
+    "react-dom": "catalog:react18"
   },
   "devDependencies": {
     "@suspensive/eslint-config": "workspace:*",
     "@suspensive/tsconfig": "workspace:*",
     "@types/react": "catalog:react18",
-    "@types/react-dom": "catalog:react-dom",
+    "@types/react-dom": "catalog:react18",
     "@vitejs/plugin-react": "^4.3.2",
     "globals": "^15.10.0"
   }

examples/vite-react-18-suspense-prerender-siblings-problem/src/main.tsx

@@ -1,5 +1,4 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
@@ -19,7 +18,6 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={client}>
       <App />
-      <ReactQueryDevtools client={client} />
     </QueryClientProvider>
   </StrictMode>
 )

examples/vite-react-18-suspense-prerender-siblings-problem/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./vite.config.ts"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./vite.config.ts"],"version":"5.7.2"}

packages/jotai/package.json

@@ -53,13 +53,13 @@
     "@suspensive/eslint-config": "workspace:*",
     "@suspensive/tsconfig": "workspace:*",
     "@suspensive/tsup": "workspace:*",
-    "@types/react": "catalog:react18",
+    "@types/react": "catalog:react19",
     "jotai": "^2.8.4",
-    "react": "catalog:react18"
+    "react": "catalog:react19"
   },
   "peerDependencies": {
     "jotai": "^2",
-    "react": "^18"
+    "react": "^18 || ^19"
   },
   "publishConfig": {
     "access": "public"