Load called twice on page reload?

[blitzbohne]

Describe the bug

Hello,

We have a root route (A) with a children root route (B) which contains by itself other children. Not sure if that matters however as this bug occurs during reloading the page I can not provide a stackblitz sample so trying to explain the circumstances as best as I can.

When we use a simple loader on the child root route (B) and simply log out then on initial page load when hitting the route it calls that loader twice. However on regular navigation using Links it correctly is called only once. We also checked if the abortController is maybe called on second load (like with the useEffect issue in dev mode) but it is not.

Your Example Website or App

https://stackblitz.com/github/tanstack/router/tree/beta/examples/react/quickstart?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

See description

Expected behavior

Loader when entering a route is only called once not twice

Screenshots or Videos

No response

Platform

• OS:macOS
• Browser: Chrome
• Version: 120
• Tanstack Router: 0.0.1-beta.279

Additional context

No response

[ericchernuka]

Is it possible that its just due to <StrictMode />? If you remove that temporarily, does it only get called once?

[blitzbohne]

Yes indeed that solves it. I already feared its due useEffect but isn't that something the router should handle correctly also in strict / dev mode like ie tanstack query does?

[ericchernuka]

Ya that was a lovely thing React Query did to smooth over that. I'd actually bet it's more of a result of the recent switch to be React dominant in its implementation and it was possibly overlooked. Good call out.

[tannerlinsley]

Bug. I’ll get it fixed

[ericchernuka]

You're the best @tannerlinsley!

[tannerlinsley]

I can't seem to replicate. Will you please add a link to a sandbox set up with the bug?

[blitzbohne]

@tannerlinsley Not sure why I can't share my fork on stackblitz. However I simply modified the sample code and post it here so you could just make copy+paste on main.tsx. The relevant change is the loader on the index route, on initial load it'll show a load counter of 2 so it got called twice. On subsequent navigation it works as expected its only on initial load:

import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import {
  Outlet,
  RouterProvider,
  Link,
  Router,
  Route,
  RootRoute,
} from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

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

let loaderCounter = 0

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/',
  loader: async () => {
    loaderCounter+= 1
    console.log('Index loader')
  },
  component: function Index() {
    return (
      <div className="p-2">
        <h3>Welcome Home! #{loaderCounter}</h3>
      </div>
    )
  },
})

const aboutRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: function About() {
    return <div className="p-2">Hello from About!</div>
  },
})

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])

const router = new Router({ routeTree, defaultPreload: 'intent' })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>,
  )
}

[tannerlinsley]

Thanks!

…

On Dec 24, 2023 at 4:44 AM -0700, Alexander Adam ***@***.***>, wrote: @tannerlinsley Not sure why I can't share my fork on stackblitz. However I simply modified the sample code and post it here so you could just make copy+paste on main.tsx. The relevant change is the loader on the index route, on initial load it'll show a load counter of 2 so it got called twice. On subsequent navigation it works as expected its only on initial load: import React, { StrictMode } from 'react' import ReactDOM from 'react-dom/client' import { Outlet, RouterProvider, Link, Router, Route, RootRoute, } from ***@***.***/react-router' import { TanStackRouterDevtools } from ***@***.***/router-devtools' const rootRoute = new RootRoute({ component: () => ( <> <div className="p-2 flex gap-2"> <Link to="/" className="[&.active]:font-bold"> Home </Link>{' '} <Link to="/about" className="[&.active]:font-bold"> About </Link> </div> <hr /> <Outlet /> <TanStackRouterDevtools /> </> ), }) let loaderCounter = 0 const indexRoute = new Route({ getParentRoute: () => rootRoute, path: '/', loader: async () => { loaderCounter+= 1 console.log('Index loader') }, component: function Index() { return ( <div className="p-2"> <h3>Welcome Home! #{loaderCounter}</h3> </div> ) }, }) const aboutRoute = new Route({ getParentRoute: () => rootRoute, path: '/about', component: function About() { return <div className="p-2">Hello from About!</div> }, }) const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]) const router = new Router({ routeTree, defaultPreload: 'intent' }) declare module ***@***.***/react-router' { interface Register { router: typeof router } } const rootElement = document.getElementById('app')! if (!rootElement.innerHTML) { const root = ReactDOM.createRoot(rootElement) root.render( <StrictMode> <RouterProvider router={router} /> </StrictMode>, ) } — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>