Re Renders Component Page Several Times

[livevsonline]

Hi

I am setting up a very simple router like this:

const testRoute= new Route({
	id: 'testRoute',
	getParentRoute: () => rootRoute,
	path: '/app/test/route',
	component: lazy(() => import("@/pages/test/testPage")),
});

My App.tsx looks like this:

import './App.css';
import {router} from "@/Routes";
import {RouterProvider} from "@tanstack/react-router";

function App() {
	return (
		<div className="App">
			<RouterProvider router={router}/>
		</div>
	)
}

export default App

In my testPage.tsx this is all i do:

function TestPage() {
	console.log('How Many Times Does Test Page Render');
	return <p>Hello Test Page</p>;
}

export default TestPage;

However the TestPage is rendered several times as demonstrated below:

Why is this happening? Is there a bug with the state flow of the router or is this normal/expected :)?

I'm on version: ^0.0.1-beta.61

[tannerlinsley]

Upgrade your version first. Then I can take a look. Tanner Linsley

…

On Feb 8, 2023 at 3:44 AM -0700, Webwizard ***@***.***>, wrote: Hi I am setting up a very simple router like this: const testRoute= new Route({ id: 'testRoute', getParentRoute: () => rootRoute, path: '/app/test/route', component: lazy(() => import("@/pages/test/testPage")), }); My App.tsx looks like this: import './App.css'; import {router} from "@/Routes"; import {RouterProvider} from ***@***.***/react-router"; function App() { return ( <div className="App"> <RouterProvider router={router}/> </div> ) } export default App In my testPage.tsx this is all i do: function TestPage() { console.log('How Many Times Does Test Page Render'); return <p>Hello Test Page</p>; } export default TestPage; However the TestPage is rendered several times as demonstrated below: Why is this happening? Is there a bug with the state flow of the router? I'm on version: ^0.0.1-beta.61 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[esparter]

I am still seeing the same thing on latest version with component being rendered twice: "@tanstack/react-router": "^1.35.6",
I have simplified it down to a single root page:

import { createRootRoute } from "@tanstack/react-router";
export const Route = createRootRoute({
  component: Root,
});

function Root() {
  console.log("Render Root");
  return <div>Hello Root World!</div>;
}

I run "vite build" and serve with local static server to remove any dev issues.

[jacobwilson41]

me too on v1.36.3

[COUSCOUSZ]

same here

[ReeceHughes]

I'm also seeing double renders and am wondering if this is expected. I was able to reproduce on the Quickstart Example on the website. I added some console.logs in index.tsx and about.tsx. Clicking on the links at the top of the page causes the component to render twice.

The example is using version 1.38.1.

[schiller-manuel]

can you please create a new github issue for this?

[ReeceHughes]

Yes, #1825. Thanks for looking.