feat(react-router): improve performance of Link

[honzahruby]

Addresses #2011 to improve performance of Link and router.buildLocation.

matchRoutesInternal traverses all routes in flatRoutes, which degrades the performance of Link with the number of routes registered. This PR adds an optimization to look up the route in routesByPath in constant time for absolute paths in to.

Rendering times of 10000 Links as described in the original discussion thread #2011 (comment)

	2 routes	400+ routes	400+ routes optimized
hardcoded href	150ms	160ms	150ms
interpolatePath	180ms	190ms	180ms
buildLocation	360ms	1760ms ⚠️	320ms
Link component	660ms	2160ms ⚠️	590ms

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f6015bf. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:eslint,test:unit,test:e2e,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[honzahruby]

❓ Would it make sense to extend ParsedLocation with the full path instead?

[pkg-pr-new]

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• tanstack-router-react-example-scroll-restoration
• tanstack-router-search-validator-adapters
• tanstack-router-example-react-start-basic
• tanstack-router-example-react-start-basic-auth
• tanstack-router-example-react-start-basic-counter
• tanstack-router-example-react-start-basic-react-query
• tanstack-router-example-react-start-basic-rsc
• tanstack-router-example-react-start-clerk-basic
• tanstack-router-example-react-start-trello-trellaux
• tanstack-router-example-react-start-supabase-basic
• tanstack-router-example-react-start-trellaux
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-react-example-with-trpc

@tanstack/create-router

pnpm add https://pkg.pr.new/@tanstack/create-router@2359

@tanstack/history

pnpm add https://pkg.pr.new/@tanstack/history@2359

@tanstack/react-cross-context

pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2359

@tanstack/react-router

pnpm add https://pkg.pr.new/@tanstack/react-router@2359

@tanstack/react-router-with-query

pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2359

@tanstack/router-arktype-adapter

pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2359

@tanstack/router-cli

pnpm add https://pkg.pr.new/@tanstack/router-cli@2359

@tanstack/router-generator

pnpm add https://pkg.pr.new/@tanstack/router-generator@2359

@tanstack/router-devtools

pnpm add https://pkg.pr.new/@tanstack/router-devtools@2359

@tanstack/router-plugin

pnpm add https://pkg.pr.new/@tanstack/router-plugin@2359

@tanstack/router-valibot-adapter

pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2359

@tanstack/router-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2359

@tanstack/start

pnpm add https://pkg.pr.new/@tanstack/start@2359

@tanstack/router-zod-adapter

pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2359

@tanstack/start-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2359

@tanstack/virtual-file-routes

pnpm add https://pkg.pr.new/@tanstack/virtual-file-routes@2359

commit: f6015bf

[schiller-manuel]

how did you measure the time?
would make sense to add this benchmark to the repo

[schiller-manuel]

does this mean if to is not specified, the link will still be slow?

in this case, can we use the current location of router instead?

[honzahruby]

Is it a valid use case to use a Link without to? If yes, we could provide the current match's fullPath as a fallback.

Currently, it only speeds up the resolve process for links with absolute paths, because they can be easily looked up in the routeById map. Is there any util to quickly resolve relative paths?

[honzahruby]

how did you measure the time? would make sense to add this benchmark to the repo

I used this code in the large-file-based example and measured the time to render the Home component in react dev tools. It renders 10000 links with generated IDs used as a route param.

Is there any performance benchmark setup in this repo? How about https://www.npmjs.com/package/reassure?