refactor(router-core): head, scripts, headers are executed in parallel and can skip store update by Sheraff · Pull Request #4925 · TanStack/router

Sheraff · 2025-08-11T18:04:52Z

Following #4916, this PR keeps reducing the number of store updates (__store.setState through updateMatch).

We can skip route.options.head(), route.options.scripts(), and route.options.headers() calls, if they are not defined, and not even call updateMatch after.

Additionally, head, scripts and headers are now called in parallel. They don't depend on one another, and so there is no reason to delay their execution by calling them serially.

This PR also fixes 2 issues:

in cancelMatch, we were resetting the timeout id to undefined before calling clearTimeout() with it
handleRedirectAndNotFound is sometimes called w/ match being undefined (in case of a redirecting match during preload), which went undetected because of heavy match! assertions, and the many try/catch blocks

With this PR, the redirection in preload test in store-updates-during-navigation goes from 11 updates during the preload to 8 updates.

Should be a partial improvement of #4359

…l and can skip store update

nx-cloud · 2025-08-11T18:05:15Z

View your CI Pipeline Execution ↗ for commit 4882c46

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	1m 41s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	4s	View ↗

☁️ Nx Cloud last updated this comment at 2025-08-15 07:37:20 UTC

pkg-pr-new · 2025-08-11T18:10:14Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@4925

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@4925

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@4925

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@4925

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@4925

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@4925

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@4925

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@4925

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@4925

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@4925

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@4925

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@4925

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@4925

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@4925

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@4925

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@4925

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@4925

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@4925

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@4925

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@4925

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@4925

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@4925

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@4925

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@4925

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@4925

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@4925

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@4925

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@4925

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@4925

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@4925

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@4925

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@4925

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@4925

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@4925

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@4925

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@4925

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@4925

commit: 4882c46

schiller-manuel · 2025-08-11T18:21:15Z

packages/router-core/src/router.ts

-                      styles,
-                    }
+
+                    return Promise.all([


why no await Promise.all()?
personally, i like async/await syntax more than "then".
unless there is a technical reason?

If we use await here, the function needs to be async, which means that it will always return a Promise, even if we returned early. I'd like to be able to do the if('then' in foo) thing where this function is called, but we can't do that if the function is async.

This reverts commit f1d0bb3.

This reverts commit 0145ed1.

This reverts commit 5bb291b.

) The `store-updates-during-navigation.test.tsx` file tests how many times `updateMatch` is called during a navigation (i.e. how many times the store is updated, and all subscribers re-run). In this PR we clean up this test file to allow us to more easily test various navigation types. We also add a test for "redirection inside beforeLoad" whose result will be improved by #4925 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

…it (#4926) Following #4916 and #4925, this PR keeps reducing the number of store updates (`__store.setState` through `updateMatch`). Reduce amount of work in `runLoader`: - don't `updateMatch` to set `isFetching: 'loader'` if we know the entire function will be synchronous - don't await `route.options.loader()` if it is synchronous - don't update store with `loaderData` if `route.options.loader` is not defined - don't `await route._lazyPromise` if it has already resolved - don't `await route._componentsPromise` if it has already resolved - don't `await minPendingPromise` if it is not defined or has already resolved For a sync `loader`, with already loaded route chunks, `runLoader` should be synchronous and trigger a single `updateMatch` call. --- The `store-updates-during-navigation` test tracking the number of executions of a `useRouterState > select` method during a navigation goes from **19 calls** without this PR, to **17 calls** with this PR. --- Should be a partial improvement of #4359 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

…tore (#4964) Following #4916, #4925, #4926, and #4928, this PR keeps reducing the number of store updates (`__store.setState` through `updateMatch`). We check the values we want to set in the store are *actually different* from what is already in the store before calling `updateMatch` --- In the `store-updates-during-navigation` test tracking the number of executions of a `useRouterState > select` method during a navigation, our main test case goes from **14 calls** without this PR, to **10 calls** with this PR. Most test cases show significant improvements as well. --- Should be a partial improvement of #4359  ## Summary by CodeRabbit * **Bug Fixes** * Prevented loss of previously loaded data during navigation when a loader yields no value. * Stabilized preloading to avoid redundant updates and unnecessary state churn. * Improved loading-state cleanup after navigation, reducing flicker and inconsistent “fetching” indicators. * **Performance** * Reduced unnecessary state updates and re-renders during and after preloads/loads for smoother navigation. * **Tests** * Updated async navigation tests to reflect refined timing and data-return behavior and added a helper to simulate delayed async results.

) The `store-updates-during-navigation.test.tsx` file tests how many times `updateMatch` is called during a navigation (i.e. how many times the store is updated, and all subscribers re-run). In this PR we clean up this test file to allow us to more easily test various navigation types. We also add a test for "redirection inside beforeLoad" whose result will be improved by #4925 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

…l and can skip store update (#4925) Following #4916, this PR keeps reducing the number of store updates (`__store.setState` through `updateMatch`). We can skip `route.options.head()`, `route.options.scripts()`, and `route.options.headers()` calls, if they are not defined, and not even call `updateMatch` after. Additionally, `head`, `scripts` and `headers` are now called in parallel. They don't depend on one another, and so there is no reason to delay their execution by calling them serially. --- This PR also fixes 2 issues: - in `cancelMatch`, we were resetting the timeout id to `undefined` **before** calling `clearTimeout()` with it - `handleRedirectAndNotFound` is sometimes called w/ `match` being `undefined` (in case of a redirecting match during preload), which went undetected because of heavy `match!` assertions, and the many `try/catch` blocks --- With this PR, the `redirection in preload` test in `store-updates-during-navigation` goes from **11 updates** during the preload to **8 updates**. --- Should be a partial improvement of #4359 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

…it (#4926) Following #4916 and #4925, this PR keeps reducing the number of store updates (`__store.setState` through `updateMatch`). Reduce amount of work in `runLoader`: - don't `updateMatch` to set `isFetching: 'loader'` if we know the entire function will be synchronous - don't await `route.options.loader()` if it is synchronous - don't update store with `loaderData` if `route.options.loader` is not defined - don't `await route._lazyPromise` if it has already resolved - don't `await route._componentsPromise` if it has already resolved - don't `await minPendingPromise` if it is not defined or has already resolved For a sync `loader`, with already loaded route chunks, `runLoader` should be synchronous and trigger a single `updateMatch` call. --- The `store-updates-during-navigation` test tracking the number of executions of a `useRouterState > select` method during a navigation goes from **19 calls** without this PR, to **17 calls** with this PR. --- Should be a partial improvement of #4359 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

…tore (#4964) Following #4916, #4925, #4926, and #4928, this PR keeps reducing the number of store updates (`__store.setState` through `updateMatch`). We check the values we want to set in the store are *actually different* from what is already in the store before calling `updateMatch` --- In the `store-updates-during-navigation` test tracking the number of executions of a `useRouterState > select` method during a navigation, our main test case goes from **14 calls** without this PR, to **10 calls** with this PR. Most test cases show significant improvements as well. --- Should be a partial improvement of #4359  ## Summary by CodeRabbit * **Bug Fixes** * Prevented loss of previously loaded data during navigation when a loader yields no value. * Stabilized preloading to avoid redundant updates and unnecessary state churn. * Improved loading-state cleanup after navigation, reducing flicker and inconsistent “fetching” indicators. * **Performance** * Reduced unnecessary state updates and re-renders during and after preloads/loads for smoother navigation. * **Tests** * Updated async navigation tests to reflect refined timing and data-return behavior and added a helper to simulate delayed async results.

…nStack#4957) The `store-updates-during-navigation.test.tsx` file tests how many times `updateMatch` is called during a navigation (i.e. how many times the store is updated, and all subscribers re-run). In this PR we clean up this test file to allow us to more easily test various navigation types. We also add a test for "redirection inside beforeLoad" whose result will be improved by TanStack#4925 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

…l and can skip store update (TanStack#4925) Following TanStack#4916, this PR keeps reducing the number of store updates (`__store.setState` through `updateMatch`). We can skip `route.options.head()`, `route.options.scripts()`, and `route.options.headers()` calls, if they are not defined, and not even call `updateMatch` after. Additionally, `head`, `scripts` and `headers` are now called in parallel. They don't depend on one another, and so there is no reason to delay their execution by calling them serially. --- This PR also fixes 2 issues: - in `cancelMatch`, we were resetting the timeout id to `undefined` **before** calling `clearTimeout()` with it - `handleRedirectAndNotFound` is sometimes called w/ `match` being `undefined` (in case of a redirecting match during preload), which went undetected because of heavy `match!` assertions, and the many `try/catch` blocks --- With this PR, the `redirection in preload` test in `store-updates-during-navigation` goes from **11 updates** during the preload to **8 updates**. --- Should be a partial improvement of TanStack#4359 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

…it (TanStack#4926) Following TanStack#4916 and TanStack#4925, this PR keeps reducing the number of store updates (`__store.setState` through `updateMatch`). Reduce amount of work in `runLoader`: - don't `updateMatch` to set `isFetching: 'loader'` if we know the entire function will be synchronous - don't await `route.options.loader()` if it is synchronous - don't update store with `loaderData` if `route.options.loader` is not defined - don't `await route._lazyPromise` if it has already resolved - don't `await route._componentsPromise` if it has already resolved - don't `await minPendingPromise` if it is not defined or has already resolved For a sync `loader`, with already loaded route chunks, `runLoader` should be synchronous and trigger a single `updateMatch` call. --- The `store-updates-during-navigation` test tracking the number of executions of a `useRouterState > select` method during a navigation goes from **19 calls** without this PR, to **17 calls** with this PR. --- Should be a partial improvement of TanStack#4359 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

…tore (TanStack#4964) Following TanStack#4916, TanStack#4925, TanStack#4926, and TanStack#4928, this PR keeps reducing the number of store updates (`__store.setState` through `updateMatch`). We check the values we want to set in the store are *actually different* from what is already in the store before calling `updateMatch` --- In the `store-updates-during-navigation` test tracking the number of executions of a `useRouterState > select` method during a navigation, our main test case goes from **14 calls** without this PR, to **10 calls** with this PR. Most test cases show significant improvements as well. --- Should be a partial improvement of TanStack#4359  ## Summary by CodeRabbit * **Bug Fixes** * Prevented loss of previously loaded data during navigation when a loader yields no value. * Stabilized preloading to avoid redundant updates and unnecessary state churn. * Improved loading-state cleanup after navigation, reducing flicker and inconsistent “fetching” indicators. * **Performance** * Reduced unnecessary state updates and re-renders during and after preloads/loads for smoother navigation. * **Tests** * Updated async navigation tests to reflect refined timing and data-return behavior and added a helper to simulate delayed async results.

refactor(router-core): head, scripts, headers are executed in paralle…

00e4a8a

…l and can skip store update

github-actions bot added the package: router-core label Aug 11, 2025

ci: apply automated fixes

265bd21

Sheraff and others added 2 commits August 11, 2025 20:16

dont force executeHead to be async

6262e0b

ci: apply automated fixes

a5f1810

schiller-manuel reviewed Aug 11, 2025

View reviewed changes

Sheraff and others added 10 commits August 11, 2025 22:48

debug: does it work serially?

f1d0bb3

Revert "debug: does it work serially?"

f4bfcc8

This reverts commit f1d0bb3.

is it actually a forced update issue?

0145ed1

Revert "is it actually a forced update issue?"

2b5ee89

This reverts commit 0145ed1.

is it the non reactive update order?

5bb291b

Revert "is it the non reactive update order?"

120d3dd

This reverts commit 5bb291b.

Merge branch 'main' into refactor-router-core-execute-head-skip-updates

7b667f0

Merge branch 'main' into refactor-router-core-execute-head-skip-updates

aefd873

sometimes match doesnt exist, when redirecting during a preload

b706259

ci: apply automated fixes

78802ef

Sheraff mentioned this pull request Aug 15, 2025

test(react-router): improve store-updates-during-navigation tests #4957

Merged

Sheraff added 2 commits August 15, 2025 09:17

Merge branch 'main' into refactor-router-core-execute-head-skip-updates

908c19d

redirection in preload from 11 to 8 updates

4882c46

github-actions bot added the package: react-router label Aug 15, 2025

Sheraff merged commit 6b124c6 into main Aug 15, 2025
5 checks passed

Sheraff deleted the refactor-router-core-execute-head-skip-updates branch August 15, 2025 07:38

Sheraff mentioned this pull request Aug 15, 2025

refactor(router-core): skip loader and store update if nothing to await #4926

Merged

This was referenced Aug 16, 2025

refactor(router-core): skip beforeLoad and related store updates if options is not defined #4928

Merged

refactor(router-core): Verify changes are necessary before updating store #4964

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(router-core): head, scripts, headers are executed in parallel and can skip store update#4925

refactor(router-core): head, scripts, headers are executed in parallel and can skip store update#4925
Sheraff merged 16 commits intomainfrom
refactor-router-core-execute-head-skip-updates

Sheraff commented Aug 11, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Aug 11, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Aug 11, 2025 •

edited

Loading

Uh oh!

schiller-manuel Aug 11, 2025

Uh oh!

Sheraff Aug 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Sheraff commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

schiller-manuel Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

Sheraff Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Sheraff commented Aug 11, 2025 •

edited

Loading

nx-cloud bot commented Aug 11, 2025 •

edited

Loading

pkg-pr-new bot commented Aug 11, 2025 •

edited

Loading