search

TanStack / router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://tanstack.com/router
MIT License
7.19k stars 486 forks source link

Rerendering root router component twice (even without StrictMode) #1539

Closed ziongh closed 2 weeks ago

ziongh commented 2 weeks ago

Describe the bug

When using the _root router and setting the component with a React component containing an Outlet inside, this component is rendered twice.

Your Example Website or App

https://github.com/ziongh/example-farm-tanstack-reatom

Steps to Reproduce the Bug or Issue

  1. Open a browser with the development tools opened
  2. Navigate to http://localhost:9000/dashboard/todo
  3. Check the Console Output and you'll see two "DefaultRoute" messages that are generated from the root component

Expected behavior

I would expect the component to re-render only when the route changes.

Screenshots or Videos

No response

Platform

Additional context

No response

SeanCassiere commented 2 weeks ago

Your example app is not loadable in Stackblitz for us to observe and assess the behaviour described.

Please add a minimal reproducible example for us to be able to correctly observe what's happening. You can create a minimal example using the Router file-based stackblitz starter.

Here are some guidelines you can follow when creating a minimal reproducible example: https://stackoverflow.com/help/mcve

ziongh commented 2 weeks ago

That's because I'm using Farm that is written in rust, and Stackblitz does not support native code.

However you can use the github codespace to run the code (pnpm install then pnpm start). Or build on your local machine too.

I can make a different branch using Vite instead of farm, but the result is the same.

image

SeanCassiere commented 2 weeks ago

I can make a different branch using Vite instead of farm, but the result is the same

It'd be better if you could reproduce the example without all the extra dependencies and extra code, since the minimal reproducible example needs to have just enough to show the bug you are facing. Hence, why we recommend forking one of the Stackblitz examples are a starter.

SeanCassiere commented 2 weeks ago

As per the comment on #1538 (and this comment), I'm closing this for now.

As mentioned in my follow-up comment, if you run into this issue using React, please ping me here or open a new issue referencing this one.