diff --git a/benchmarks/client-nav/react/app.tsx b/benchmarks/client-nav/react/app.tsx index 113ba81b488..db1e935ccc3 100644 --- a/benchmarks/client-nav/react/app.tsx +++ b/benchmarks/client-nav/react/app.tsx @@ -6,6 +6,7 @@ import { createRootRoute, createRoute, createRouter, + useMatch, useParams, useSearch, } from '@tanstack/react-router' @@ -13,7 +14,7 @@ import { function runPerfSelectorComputation(seed: number) { let value = Math.trunc(seed) | 0 - for (let index = 0; index < 100; index++) { + for (let index = 0; index < 50; index++) { value = (value * 1664525 + 1013904223 + index) >>> 0 } @@ -23,21 +24,27 @@ function runPerfSelectorComputation(seed: number) { const selectors = Array.from({ length: 20 }, (_, index) => index) function Params() { - const params = useParams({ + const number = useParams({ strict: false, select: (params) => runPerfSelectorComputation(Number(params.id ?? 0)), }) - void params - return null + return runPerfSelectorComputation(number) } function Search() { - const search = useSearch({ + const number = useSearch({ strict: false, select: (search) => runPerfSelectorComputation(Number(search.id ?? 0)), }) - void search - return null + return runPerfSelectorComputation(number) +} + +function Match() { + const number = useMatch({ + strict: false, + select: (match) => runPerfSelectorComputation(Number(match.params.id ?? 0)), + }) + return runPerfSelectorComputation(number) } function Links() { @@ -60,6 +67,9 @@ function Root() { {selectors.map((selector) => ( ))} + {selectors.map((selector) => ( + + ))} ) @@ -72,7 +82,11 @@ const root = createRootRoute({ const route = createRoute({ getParentRoute: () => root, path: '/$id', + validateSearch: (search) => ({ id: search.id }), component: () =>
, + beforeLoad: () => Promise.resolve(), + loaderDeps: ({ search }) => ({ id: search.id }), + loader: () => Promise.resolve(), }) export function createTestRouter() { @@ -82,6 +96,7 @@ export function createTestRouter() { }), scrollRestoration: true, routeTree: root.addChildren([route]), + defaultPendingMinMs: 0, }) const component = diff --git a/benchmarks/client-nav/react/setup.ts b/benchmarks/client-nav/react/setup.ts index b0a9a84eb26..0e53c00576d 100644 --- a/benchmarks/client-nav/react/setup.ts +++ b/benchmarks/client-nav/react/setup.ts @@ -32,10 +32,13 @@ export function setup() { next = () => { const nextId = id++ + // update param every 2 navigations, + // update search every other navigation, + // this way we can test the impact of both params and search updates, + // and still observe improvements on granular re-rendering return navigate({ to: '/$id', - params: { id: nextId }, - // update search every 2 navigations, to still test them, but also measure the impact of granular re-rendering + params: { id: Math.floor((nextId + 1) / 2) }, search: { id: Math.floor(nextId / 2) }, replace: true, }) diff --git a/benchmarks/client-nav/solid/app.tsx b/benchmarks/client-nav/solid/app.tsx index 7f4fd05aa85..67e18a652f3 100644 --- a/benchmarks/client-nav/solid/app.tsx +++ b/benchmarks/client-nav/solid/app.tsx @@ -1,4 +1,4 @@ -import { For, createEffect } from 'solid-js' +import { For } from 'solid-js' import { Link, Outlet, @@ -7,6 +7,7 @@ import { createRootRoute, createRoute, createRouter, + useMatch, useParams, useSearch, } from '@tanstack/solid-router' @@ -14,7 +15,7 @@ import { function runPerfSelectorComputation(seed: number) { let value = Math.trunc(seed) | 0 - for (let index = 0; index < 100; index++) { + for (let index = 0; index < 50; index++) { value = (value * 1664525 + 1013904223 + index) >>> 0 } @@ -24,29 +25,27 @@ function runPerfSelectorComputation(seed: number) { const selectors = Array.from({ length: 20 }, (_, index) => index) function Params() { - const params = useParams({ + const number = useParams({ strict: false, select: (params) => runPerfSelectorComputation(Number(params.id ?? 0)), }) - - createEffect(() => { - void params() - }) - - return null + return <>{runPerfSelectorComputation(number())} } function Search() { - const search = useSearch({ + const number = useSearch({ strict: false, select: (search) => runPerfSelectorComputation(Number(search.id ?? 0)), }) + return <>{runPerfSelectorComputation(number())} +} - createEffect(() => { - void search() +function Match() { + const number = useMatch({ + strict: false, + select: (match) => runPerfSelectorComputation(Number(match.params.id ?? 0)), }) - - return null + return <>{runPerfSelectorComputation(number())} } function Links() { @@ -63,6 +62,7 @@ function Root() { {() => } {() => } {() => } + {() => } ) @@ -75,9 +75,13 @@ const root = createRootRoute({ const route = createRoute({ getParentRoute: () => root, path: '/$id', + validateSearch: (search) => ({ id: search.id }), component: () => { return
}, + beforeLoad: () => Promise.resolve(), + loaderDeps: ({ search }) => ({ id: search.id }), + loader: () => Promise.resolve(), }) export function createTestRouter() { @@ -87,6 +91,7 @@ export function createTestRouter() { }), scrollRestoration: true, routeTree: root.addChildren([route]), + defaultPendingMinMs: 0, }) const component = () => diff --git a/benchmarks/client-nav/solid/setup.ts b/benchmarks/client-nav/solid/setup.ts index daac408827a..81074aae01f 100644 --- a/benchmarks/client-nav/solid/setup.ts +++ b/benchmarks/client-nav/solid/setup.ts @@ -35,10 +35,13 @@ export function setup() { next = () => { const nextId = id++ + // update param every 2 navigations, + // update search every other navigation, + // this way we can test the impact of both params and search updates, + // and still observe improvements on granular re-rendering return navigate({ to: '/$id', - params: { id: nextId }, - // update search every 2 navigations, to still test them, but also measure the impact of granular re-rendering + params: { id: Math.floor((nextId + 1) / 2) }, search: { id: Math.floor(nextId / 2) }, replace: true, }) diff --git a/benchmarks/client-nav/vue/app.tsx b/benchmarks/client-nav/vue/app.tsx index 0e7d8eb3cdb..a3d902365c0 100644 --- a/benchmarks/client-nav/vue/app.tsx +++ b/benchmarks/client-nav/vue/app.tsx @@ -7,6 +7,7 @@ import { createRootRoute, createRoute, createRouter, + useMatch, useParams, useSearch, } from '@tanstack/vue-router' @@ -14,7 +15,7 @@ import { function runPerfSelectorComputation(seed: number) { let value = Math.trunc(seed) | 0 - for (let index = 0; index < 100; index++) { + for (let index = 0; index < 50; index++) { value = (value * 1664525 + 1013904223 + index) >>> 0 } @@ -25,29 +26,35 @@ const selectors = Array.from({ length: 20 }, (_, index) => index) const Params = Vue.defineComponent({ setup() { - const params = useParams({ + const number = useParams({ strict: false, select: (params) => runPerfSelectorComputation(Number(params.id ?? 0)), }) - return () => { - void params.value - return null - } + return () => runPerfSelectorComputation(number.value) }, }) const Search = Vue.defineComponent({ setup() { - const search = useSearch({ + const number = useSearch({ strict: false, select: (search) => runPerfSelectorComputation(Number(search.id ?? 0)), }) - return () => { - void search.value - return null - } + return () => runPerfSelectorComputation(number.value) + }, +}) + +const Match = Vue.defineComponent({ + setup() { + const number = useMatch({ + strict: false, + select: (match) => + runPerfSelectorComputation(Number(match.params.id ?? 0)), + }) + + return () => runPerfSelectorComputation(number.value) }, }) @@ -74,6 +81,9 @@ const Root = Vue.defineComponent({ {selectors.map((selector) => ( ))} + {selectors.map((selector) => ( + + ))} ) @@ -87,7 +97,11 @@ const root = createRootRoute({ const route = createRoute({ getParentRoute: () => root, path: '/$id', + validateSearch: (search) => ({ id: search.id }), component: () =>
, + beforeLoad: () => Promise.resolve(), + loaderDeps: ({ search }) => ({ id: search.id }), + loader: () => Promise.resolve(), }) export function createTestRouter() { @@ -97,6 +111,7 @@ export function createTestRouter() { }), scrollRestoration: true, routeTree: root.addChildren([route]), + defaultPendingMinMs: 0, }) const component = diff --git a/benchmarks/client-nav/vue/setup.ts b/benchmarks/client-nav/vue/setup.ts index 87ea759ba66..03182872489 100644 --- a/benchmarks/client-nav/vue/setup.ts +++ b/benchmarks/client-nav/vue/setup.ts @@ -35,10 +35,13 @@ export function setup() { next = () => { const nextId = id++ + // update param every 2 navigations, + // update search every other navigation, + // this way we can test the impact of both params and search updates, + // and still observe improvements on granular re-rendering return navigate({ to: '/$id', - params: { id: nextId }, - // update search every 2 navigations, to still test them, but also measure the impact of granular re-rendering + params: { id: Math.floor((nextId + 1) / 2) }, search: { id: Math.floor(nextId / 2) }, replace: true, })