Skip to content

feat(router-core) Path: performance improvements [PoC] #4682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 14 commits into from
Closed

feat(router-core) Path: performance improvements [PoC] #4682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d47b3bd
feat(router-core) Path: performance improvements [WIP]
Sheraff Jul 17, 2025
0e8720c
fixes
Sheraff Jul 17, 2025
357f87f
ci: apply automated fixes
autofix-ci[bot] Jul 17, 2025
1b7d5ec
fixes
Sheraff Jul 17, 2025
255ba4d
ci: apply automated fixes
autofix-ci[bot] Jul 17, 2025
3edf06a
fix router-core > router > processRouteTree
Sheraff Jul 17, 2025
eb0c8ca
minor improvements
Sheraff Jul 17, 2025
5344fc7
fix link.bench
Sheraff Jul 17, 2025
dfd2668
ci: apply automated fixes
autofix-ci[bot] Jul 17, 2025
20d67b9
minor simplification
Sheraff Jul 17, 2025
931b129
add caching to getMatchedRoutes
Sheraff Jul 17, 2025
c0dc0f2
prettify
Sheraff Jul 17, 2025
123afbc
another caching opportunity
Sheraff Jul 17, 2025
96634b3
improve cache hit rate for getMatchedRoutes
Sheraff Jul 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 113 additions & 104 deletions packages/react-router/tests/link.bench.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,12 @@ const InterpolatePathLink = ({
params,
children,
}: React.PropsWithChildren<LinkProps>) => {
const href = interpolatePath({ path: to, params }).interpolatedPath
const router = useRouter()
const href = interpolatePath({
path: to,
params,
encodePathParam: router.encodePathParam,
}).interpolatedPath
return <a href={href}>{children}</a>
}

Expand Down Expand Up @@ -70,117 +75,121 @@ describe.each([
// matchedParamId: 9999, // range from 0 to numberOfRoutes-1
// numberOfLinks: 15000,
// },
])('$name', ({ numberOfRoutes, numberOfLinks, matchedParamId }) => {
const renderRouter = createRouterRenderer(numberOfRoutes)

bench(
'hardcoded href',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<a key={i} href={`/params/${i}`}>
{i}
</a>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)

bench(
'interpolate path',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<InterpolatePathLink
key={i}
to={`/params/$param${Math.min(i, matchedParamId)}`}
params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
>
{i}
</InterpolatePathLink>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)
])(
'$name',
{ concurrent: false, sequential: true },
({ numberOfRoutes, numberOfLinks, matchedParamId }) => {
const renderRouter = createRouterRenderer(numberOfRoutes)

bench(
'build location',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<BuildLocationLink
key={i}
to={`/params/$param${Math.min(i, matchedParamId)}`}
params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
>
{i}
</BuildLocationLink>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)
bench(
'hardcoded href',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<a key={i} href={`/params/${i}`}>
{i}
</a>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)

bench(
'link to absolute path',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<Link
key={i}
to={`/params/$param${Math.min(i, matchedParamId)}`}
params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
>
{i}
</Link>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)
bench(
'interpolate path',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<InterpolatePathLink
key={i}
to={`/params/$param${Math.min(i, matchedParamId)}`}
params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
>
{i}
</InterpolatePathLink>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)

bench(
'link to relative path',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => {
const to = `./params/$param${Math.min(i, matchedParamId)}`
bench(
'build location',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<BuildLocationLink
key={i}
to={`/params/$param${Math.min(i, matchedParamId)}`}
params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
>
{i}
</BuildLocationLink>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)

return (
bench(
'link to absolute path',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<Link
key={i}
from="/"
to={to}
to={`/params/$param${Math.min(i, matchedParamId)}`}
params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
>
{i}
</Link>
)
}),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)

bench(
'link to relative path',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => {
const to = `./params/$param${Math.min(i, matchedParamId)}`

bench(
'link to current path',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<Link key={i} from="/" search={{ param: i }}>
{i}
</Link>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)
})
return (
<Link
key={i}
from="/"
to={to}
params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
>
{i}
</Link>
)
}),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)

bench(
'link to current path',
() => {
const router = renderRouter(
Array.from({ length: numberOfLinks }).map((_, i) => (
<Link key={i} from="/" search={{ param: i }}>
{i}
</Link>
)),
)
render(<RouterProvider router={router} />)
},
{ warmupIterations: 1 },
)
},
)
2 changes: 1 addition & 1 deletion packages/router-core/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export {
removeTrailingSlash,
exactPathTest,
resolvePath,
parsePathname,
cachedParsePathname as parsePathname,
interpolatePath,
matchPathname,
removeBasepath,
Expand Down
Loading
Loading