rare-sapphire

memoized route components

Every route navigation triggers a top-level re-render of all routes, including the root route. If I navigate from /products/ to /products/5, I get re-renders for the components in: - __root.tsx - /products/route.tsx - /products/$id.tsx I'm wondering why that is - why can't we just only re-render the component in /products/$id ? Wrapping all route components in React.memo works as expected, so one question is if the router could do this automatically ?

const Products = () => ...
const MemoProducts = React.memo(Products)
export const Route = createFileRoute("/products")({
  component: MemoProducts,
});

const Products = () => ...
const MemoProducts = React.memo(Products)
export const Route = createFileRoute("/products")({
  component: MemoProducts,
});

since re-renders are largely driven by subscriptions to useRouterState , components would re-render when something changes that they are interested in

15 Replies

rare-sapphire•2y ago

@Tanner Linsley

extended-salmon•2y ago

Well, it's not supposed to 🙂 Everything here can be fine grained Is this one of the stock examples or a modified one? Usually this happens when a hook that should be using a selector isn't Which, even if we were to memoize all of the components, would still have the same issue of overrendering

rare-sapphireOP•2y ago

hmm no, I just forked the basic example and added a log to the posts lists in the sidebar: https://stackblitz.com/edit/tanstack-router-7zztcv?file=src%2Froutes%2Fposts.tsx every time when I click on a post that takes me to a detail view, the posts route itself also renders

Dominik Dorfmeister

StackBlitz

Router Basic File Based Example (forked) - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

rare-sapphireOP•2y ago

okay interesting, it seems to be because of the loader refetching; setting a defaultStaleTime works; I have to dig deeper what's the problem in my case because I'm using query, where structural sharing should solve it. Or does a loader invocation always trigger a component render even if nothing changed ?

rare-sapphireOP•2y ago

okay this seems to again have something to do with how I have my settings:

defaultPendingMinMs: 0,
defaultPendingMs: 0,
defaultPendingComponent: () => <div>Loading default...</div>,

defaultPendingMinMs: 0,
defaultPendingMs: 0,
defaultPendingComponent: () => <div>Loading default...</div>,

now if I set those, and I switch between Home and About, I get a re-render of the root route, and thus everything renders top down. see this reproduction: https://stackblitz.com/edit/tanstack-router-vme4kr?file=src%2Fmain.tsx

Dominik Dorfmeister

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

rare-sapphireOP•2y ago

are these settings not supported? I think I've traced a couple of weird behavious to them. Tbh, I'm not really a fan of clicking a link and then not getting feedback for 1 second because the loader runs. Yes, we can do overlays or so but if I'd want to instantly move to the next page and just show the loader there, shouldn't this work just the same ? the weird part is also that these routes have no loaders, so they shouldn't be pending at all imo, but these settings still influence something 🤔 I'm fine with just slapping memo on the route components, as they have no props anyways. I just think it's a bit curious that lots of things seem to be dependent on transitions not being turned off. The tradeoff with suspense I guess 😂

extended-salmon•2y ago

@TkDodo 🔮 we just need to schedule a time to screen share There’s a lot of nuance here and it’ll be easier in person.

rare-sapphireOP•2y ago

👍

national-gold•2y ago

Is there an update on this? I'm having the same problem.

rare-sapphireOP•2y ago

Wrap all route components where this matters into React.memo to work around it

national-gold•2y ago

Thanks. That worked.

quickest-silver•2y ago

Should https://github.com/TanStack/router/issues/1156 be closed with this solution, or is it planned to be resolved on the library level in the future?

GitHub

Navigating to the active page causes it to render twice · Issue #11...

Describe the bug If you click on a link to a page you're currently on, you it would render two times. Same thing happens if you add/change search params on an active page. Your Example Website ...

rare-sapphireOP•2y ago

thx - closed with has workaround resolution for now

rare-sapphire•2y ago

is this again a duplicate? https://github.com/TanStack/router/issues/1462

GitHub

I'm reaching out to report a performance issue. · Issue #1462 · Tan...

I'm reaching out to report a performance issue. The problem involves performance in two scenarios: When updating the search parameters using useNavigation, the entire page, including all layout...

provincial-silver•2y ago

Sounds like it. At some point we'll need to document that the usage of React.memo-ing the page components selectively.

Gaming

Programming

memoized route components

Did you find this page helpful?