[Feature]: Performance issues

[fxOne]

What is the new or updated feature that you are suggesting?

I am currently having some performance issues with the latest react-router version. The route change that triggers the useRoute hook takes around 67ms on my computer. We currently have about 12k flatten routes. They are mostly repeating the same sub routes for each main page.

Below you can see the profiling report:

I believe I have identified the following improvements: flattenRoutes and rankRouteBranches are recalculated for each navigation. Since the routes should mostly be a static object, it should be possible to calculate them once and then save them for later navigation. https://github.com/remix-run/react-router/blob/a7a77da997eaa2eb447a7e30915e1f92e401c118/packages/react-router/index.tsx#L876

Since routes usually have the same score, compareIndexes is quite often called with a map loop for comparing routesMeta. It might be an idea to precalculate these values. https://github.com/remix-run/react-router/blob/a7a77da997eaa2eb447a7e30915e1f92e401c118/packages/react-router/index.tsx#L957

Why should this feature be included?

Clicking a link and need to wait does not feel good

[Mr-LJQ]

I think the main problem is that react-router needs to provide support for some conditional routing of users, and to support this ability, then performance optimization cannot simply cache the results of flattenRoutes. I think a possible improvement would be to provide a parameter for the user to declare his routes to be static, so that it is possible to distinguish between users who are using conditional routing and those who are not. In this way, the situation you are talking about can be improved without breaking the original logic.

[stingrigs]

The nested routes also suffer from performance issues in v6, since the entire app re-renders on its change. Is any ability to render the layout components for the route once?

[cristianoccazinsp]

Observing the same thing. Simple route changes will cause a whole re-render with expensive calculations.

[brophdawg11]

This is semi-known and we've had a bunch of discussions on how to improve it but had to wait for all of the Remix + React Router 6.4 work to land before we could consider it. I'm going to close this as a dup of https://github.com/remix-run/remix/discussions/4786 which should improve route ranking/matching performance 👍