TanStack•9mo ago•

13 replies

awake-maroon

SolidJS and TanStack Router Excessive Rendering Issue

When integrating SolidJS with TanStack Router, there are unexpected rendering behaviors affecting performance. Specifically, the home page renders multiple times on initial load, and enabling

defaultPreload: 'intent'

defaultPreload: 'intent'

causes continuous re-renders when hovering over links.

Issues Identified

1. Multiple Renders on Home Page Load:
- The home page (

) renders at least four times upon initial navigation.
- Observed via

console.log("index page render")

console.log("index page render")

in the

Index

Index

component.

2. Unlimited Renders with Preload Intent:
- When

defaultPreload: 'intent'

defaultPreload: 'intent'

is enabled in the router configuration, hovering over a link (e.g., "About") triggers continuous re-renders of the linked page's component.
- This results in repeated

console.log("about page render")

console.log("about page render")

outputs as long as the mouse hovers over the link.

Reproduction Steps

To reproduce the issues, follow these steps:

1. Create a New Project:

   bunx create-tsrouter-app@latest my-app --framework solid --template file-router

   bunx create-tsrouter-app@latest my-app --framework solid --template file-router

2. Modify Root Route (

src/routes/__root.tsx

src/routes/__root.tsx

   import { createRootRoute, Link, Outlet } from '@tanstack/solid-router'
   import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

   export const Route = createRootRoute({
     component: () => (
       <>
         <div class="p-2 flex gap-2">
           <Link to="/" class="[&.active]:font-bold">
             Home
           </Link>{' '}
           <Link to="/about" class="[&.active]:font-bold">
             About
           </Link>
         </div>
         <hr />
         <Outlet />
         <TanStackRouterDevtools />
       </>
     ),
   })

   import { createRootRoute, Link, Outlet } from '@tanstack/solid-router'
   import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

   export const Route = createRootRoute({
     component: () => (
       <>
         <div class="p-2 flex gap-2">
           <Link to="/" class="[&.active]:font-bold">
             Home
           </Link>{' '}
           <Link to="/about" class="[&.active]:font-bold">
             About
           </Link>
         </div>
         <hr />
         <Outlet />
         <TanStackRouterDevtools />
       </>
     ),
   })

TanStack•9mo ago•

13 replies

awake-maroon

SolidJS and TanStack Router Excessive Rendering Issue

When integrating SolidJS with TanStack Router, there are unexpected rendering behaviors affecting performance. Specifically, the home page renders multiple times on initial load, and enabling

defaultPreload: 'intent'

defaultPreload: 'intent'

causes continuous re-renders when hovering over links.

Issues Identified

1. Multiple Renders on Home Page Load:
- The home page (

) renders at least four times upon initial navigation.
- Observed via

console.log("index page render")

console.log("index page render")

in the

Index

Index

component.

2. Unlimited Renders with Preload Intent:
- When

defaultPreload: 'intent'

defaultPreload: 'intent'

is enabled in the router configuration, hovering over a link (e.g., "About") triggers continuous re-renders of the linked page's component.
- This results in repeated

console.log("about page render")

console.log("about page render")

outputs as long as the mouse hovers over the link.

Reproduction Steps

To reproduce the issues, follow these steps:

1. Create a New Project:

   bunx create-tsrouter-app@latest my-app --framework solid --template file-router

   bunx create-tsrouter-app@latest my-app --framework solid --template file-router

2. Modify Root Route (

src/routes/__root.tsx

src/routes/__root.tsx

   import { createRootRoute, Link, Outlet } from '@tanstack/solid-router'
   import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

   export const Route = createRootRoute({
     component: () => (
       <>
         <div class="p-2 flex gap-2">
           <Link to="/" class="[&.active]:font-bold">
             Home
           </Link>{' '}
           <Link to="/about" class="[&.active]:font-bold">
             About
           </Link>
         </div>
         <hr />
         <Outlet />
         <TanStackRouterDevtools />
       </>
     ),
   })

   import { createRootRoute, Link, Outlet } from '@tanstack/solid-router'
   import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

   export const Route = createRootRoute({
     component: () => (
       <>
         <div class="p-2 flex gap-2">
           <Link to="/" class="[&.active]:font-bold">
             Home
           </Link>{' '}
           <Link to="/about" class="[&.active]:font-bold">
             About
           </Link>
         </div>
         <hr />
         <Outlet />
         <TanStackRouterDevtools />
       </>
     ),
   })

SolidJS and TanStack Router Excessive Rendering Issue

Issues Identified

Reproduction Steps

Similar Threads

SolidJS and TanStack Router Excessive Rendering Issue

Issues Identified

Reproduction Steps

Similar Threads

Similar Threads

Similar Threads