TanStackT
TanStack•2y ago•
21 replies
developed-pink

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,
});


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