broad-brown

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

   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 />
       </>
     ),
   })

   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 />
       </>
     ),
   })

10 Replies

broad-brownOP•2mo ago

3. Modify Home Route (src/routes/index.tsx):

   import { createFileRoute } from '@tanstack/solid-router'

   export const Route = createFileRoute('/')({
     component: Index,
   })

   function Index() {
     console.log("index page render")
     return (
       <div class="p-2">
         <h3>Welcome Home!</h3>
       </div>
     )
   }

   import { createFileRoute } from '@tanstack/solid-router'

   export const Route = createFileRoute('/')({
     component: Index,
   })

   function Index() {
     console.log("index page render")
     return (
       <div class="p-2">
         <h3>Welcome Home!</h3>
       </div>
     )
   }

4. Modify About Route (src/routes/about.tsx):

   import { createFileRoute } from '@tanstack/solid-router'

   export const Route = createFileRoute('/about')({
     component: About,
   })

   function About() {
     console.log("about page render")
     return <div class="p-2">Hello from About!</div>
   }

   import { createFileRoute } from '@tanstack/solid-router'

   export const Route = createFileRoute('/about')({
     component: About,
   })

   function About() {
     console.log("about page render")
     return <div class="p-2">Hello from About!</div>
   }

5. Test Initial Render Issue: - Run the application and navigate to the home page (/). - Observe the console for multiple index page render logs (at least four). 6. Test Preload Intent Issue: - Add defaultPreload: 'intent' to the router configuration in src/main.tsx (e.g., within createRouter options). - Hover over the "About" link and monitor the console for continuous index page render logs. Expected Behavior - The home page should render once on initial load. - Hovering over a link with defaultPreload: 'intent' should preload the route without triggering repeated renders of the target component. Actual Behavior - The home page renders multiple times (≥4) on initial load. - With defaultPreload: 'intent', hovering over a link causes the target component to re-render continuously. Environment - Framework: SolidJS v1.9.7 - Router: TanStack Router (Solid Router) v1.125.6 - Package Manager: Bun v1.2.18 - Template: File-based routing template (file-router)

broad-brownOP•2mo ago

like-gold•2mo ago

Does an older version of solid-router work? We made a few tweaks recently so might be the cause

broad-brownOP•2mo ago

I have been downgraded solid-router to 1.119.0 but not solving the issue

"@tanstack/router-plugin": "^1.125.6",
"@tanstack/solid-router": "1.119.0",
"@tanstack/solid-router-devtools": "^1.125.6"

"@tanstack/router-plugin": "^1.125.6",
"@tanstack/solid-router": "1.119.0",
"@tanstack/solid-router-devtools": "^1.125.6"

Then I continue downgraded all @tanstack/router dependencies to 1.119.0: I'm encountering a SyntaxError after downgraded @tanstack/solid-router.

"@tanstack/router-plugin": "1.119.0",
"@tanstack/solid-router": "1.119.0",
"@tanstack/solid-router-devtools": "1.119.0"

"@tanstack/router-plugin": "1.119.0",
"@tanstack/solid-router": "1.119.0",
"@tanstack/solid-router-devtools": "1.119.0"

However, this resulted in the following error:

import { generator, resolveConfigPath } from "@tanstack/router-generator";
         ^^^^^^^^^
SyntaxError: The requested module '@tanstack/router-generator' does not provide an export named 'generator'

import { generator, resolveConfigPath } from "@tanstack/router-generator";
         ^^^^^^^^^
SyntaxError: The requested module '@tanstack/router-generator' does not provide an export named 'generator'

My vite.config.ts is configured as follows:

import { defineConfig } from 'vite'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import solidPlugin from 'vite-plugin-solid'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    TanStackRouterVite({ target: 'solid', autoCodeSplitting: true }),
    solidPlugin(),
    tailwindcss(),
  ],
})

import { defineConfig } from 'vite'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import solidPlugin from 'vite-plugin-solid'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    TanStackRouterVite({ target: 'solid', autoCodeSplitting: true }),
    solidPlugin(),
    tailwindcss(),
  ],
})

I also don't know how many version should i downgrade The current implementation leads to a significant performance degradation: pages trigger onMount infinitely upon hover when defaultPreload: 'intent' is enabled, and the initial page renders redundantly multiple times (≥4) on load

like-gold•2mo ago

Yeah I have no idea what's going on. It's gotta be some version mismatch or something

broad-brownOP•2mo ago

So there is no solution on this weird re-render? I need to report to github issues?

like-gold•2mo ago

So I believe its a solid-store update causing issues. You can add this version and it will be temporarily fixed "@tanstack/solid-store": "0.7.0",

broad-brownOP•2mo ago

This fix the problem temporarily. Thank you

like-gold•2mo ago

The latest version should no longer need this

broad-brownOP•2mo ago

ya it solve the problem. Thank

Gaming

Programming

SolidJS and TanStack Router Excessive Rendering Issue

Did you find this page helpful?