TanStackT
TanStack•7mo 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' 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") in the Index component.

2. Unlimited Renders with Preload Intent:
- When 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") 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


2. Modify Root Route (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 />
       </>
     ),
   })
Was this page helpful?