Double Renders On Navigate

[ReeceHughes]

Describe the bug

Components are rendered twice when navigating to them. I would expect that a component is only rendered once.
This reproduction code is the file based quickstart example from the website with the following modifications:

• Added console.logs in the Root, Index, and About components.
• Disable pre-loading (the bug reproduces with it enabled or disabled but it is clearer to see the logging with pre-loading disabled)

Issue originally raised from this discussion.

Your Example Website or App

https://stackblitz.com/edit/github-mg7svm?file=src%2Froutes%2Fabout.tsx

Steps to Reproduce the Bug or Issue

1. Clear the console.
2. Click on Home in the navigation bar
3. Click on About

Observe the console output, each component and the root component is re-rendered. Example Output:

Root
Home
Root
Home
Root
About
Root
About

Expected behavior

I expected the root component to be rendered once total and the children (home and about) to only be rendered 1 time when they are navigated to.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Brave/Chromium
• Version: Version 1.67.116 Chromium: 126.0.6478.71

Additional context

No response

[SeanCassiere]

We don't memoize your components. We follow React's rendering.

Same thing, with the memoization: https://stackblitz.com/edit/github-mg7svm-ed3yqq?file=src%2Froutes%2F__root.tsx

[nimish-gupta]

Getting same double rendering issue in my project

We don't memoize your components. We follow React's rendering.

Same thing, with the memoization: https://stackblitz.com/edit/github-mg7svm-ed3yqq?file=src%2Froutes%2F__root.tsx

Not able to open this link, i added memoization too, but just want to check it.

[schiller-manuel]

@nimish-gupta can you please open a new issue and provide a minimal complete example by forking one of the examples on stackblitz?

[abartolo]

In case this helps anyone still seeing this issue, I found that having StrictMode as shown in the docs, it rerenders twice in dev but DOES NOT in prod build.

if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>,
  );
}

[toph-pottschmidt]

I also had this issue, but it was user error in my case. I was accidentally rendering <Outlet /> twice in my root component due to a quick and messy migration to tanstack-router. Worth taking small moments to sanity check things to potentially save hours of headache later.