Support route elements to prevent unnecessary remounts

[hednowley]

Hello!

I’ve hit some subtle performance problems while migrating from React Router to TanStack Router that come from the requirement that each route specifies a component.

When multiple routes render structurally similar React trees, React sees a different component type at the route boundary and recreates the entires tree underneath it.

// Page will remount every time you change tab

const editorRoute = createRoute({
  path: "editor",
  component: () => <Page activeTab="editor" />,
})

const recipientsRoute = createRoute({
  path: "recipients",
  component: () => <Page activeTab="recipients" />,
})

const settingsRoute = createRoute({
  path: "settings",
  component: () => <Page activeTab="settings" />,
})

The workaround I’ve ended up doing is child matching in the parent route:

function ParentComponent() {
  const childMatches = useChildMatches()

  const activeTab = (() => {
    switch (childMatches[0]?.routeId) {
      case editorRoute.id:
        return "editor"
      case recipientsRoute.id:
        return "recipients"
      case settingsRoute.id:
        return "settings"
      default:
        throw new Error("Unknown child route")
    }
  })()

  return (
    <Page activeTab={activeTab}>
      <Outlet />
    </Page>
  )
}

This can be made to work, but the parent is now implementing part of the router’s matching logic and it gets messy with complex route trees.

React Router avoids this issue by allowing routes to specify elements rather than only components:

// Page won't remount as you change tab
const routes = [
  {
    path: "editor",
    element: <Page activeTab="editor" />,
  },
  {
    path: "recipients",
    element: <Page activeTab="recipients" />,
  },
  {
    path: "settings",
    element: <Page activeTab="settings" />,
  },
]

Would TanStack Router consider similarly supporting an element route option alongside component?

[schiller-manuel]

can you provide a minimal complete example on stackblitz that shows the performance issue here?
It seems logical to me to move the common part of the component tree into a parent layout route.