fix: use React.startTransition

TanStack · Nov 16, 2022 · 8dc36ec · 8dc36ec
1 parent 2294802
commit 8dc36ec
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/examples/react/basic-ssr/src/routeConfig.tsx b/examples/react/basic-ssr/src/routeConfig.tsx
@@ -19,7 +19,7 @@ export const routeConfig = createRouteConfig().createChildren((createRoute) => [
     component: Posts,
     errorComponent: () => 'Oh crap!',
     loader: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 2000))
+      await new Promise((resolve) => setTimeout(resolve, 500))
       return {
         posts: await fetchPosts(),
       }
@@ -30,7 +30,7 @@ export const routeConfig = createRouteConfig().createChildren((createRoute) => [
       path: ':postId',
       component: Post,
       loader: async ({ params: { postId } }) => {
-        await new Promise((resolve) => setTimeout(resolve, 4000))
+        await new Promise((resolve) => setTimeout(resolve, 300))
         return {
           post: await fetchPostById(postId),
         }

diff --git a/packages/react-router-devtools/src/devtools.tsx b/packages/react-router-devtools/src/devtools.tsx
@@ -829,10 +829,6 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                     <td style={{ opacity: '.5' }}>Status</td>
                     <td>{activeMatch.status}</td>
                   </tr>
-                  <tr>
-                    <td style={{ opacity: '.5' }}>Pending</td>
-                    <td>{activeMatch.isPending.toString()}</td>
-                  </tr>
                   <tr>
                     <td style={{ opacity: '.5' }}>Invalid</td>
                     <td>{activeMatch.isInvalid.toString()}</td>

diff --git a/packages/react-router/src/index.tsx b/packages/react-router/src/index.tsx
@@ -270,6 +270,12 @@ export function createReactRouter<
           next,
         } = linkInfo
 
+        const reactHandleClick = (e: Event) => {
+          React.startTransition(() => {
+            handleClick(e)
+          })
+        }
+
         const composeHandlers =
           (handlers: (undefined | ((e: any) => void))[]) =>
           (e: React.SyntheticEvent) => {
@@ -292,7 +298,7 @@ export function createReactRouter<
           ...resolvedInactiveProps,
           ...rest,
           href: disabled ? undefined : next.href,
-          onClick: composeHandlers([handleClick, onClick]),
+          onClick: composeHandlers([reactHandleClick, onClick]),
           onFocus: composeHandlers([handleFocus, onFocus]),
           onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
           onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
@@ -472,12 +478,12 @@ export function Outlet() {
   const matches = useMatches().slice(1)
   const match = matches[0]
 
+  const defaultPending = React.useCallback(() => null, [])
+
   if (!match) {
     return null
   }
 
-  const defaultPending = React.useCallback(() => null, [])
-
   const PendingComponent = (match.__.pendingComponent ??
     router.options.defaultPendingComponent ??
     defaultPending) as any