@tanstack/router-core 1.167.5 → 1.168.0

package/src/router.ts

@@ -1,7 +1,5 @@
-import { createStore } from '@tanstack/store'
 import { createBrowserHistory, parseHref } from '@tanstack/history'
 import { isServer } from '@tanstack/router-core/isServer'
-import { batch } from './utils/batch'
 import {
   DEFAULT_PROTOCOL_ALLOWLIST,
   createControlledPromise,
@@ -43,7 +41,7 @@ import {
   executeRewriteOutput,
   rewriteBasepath,
 } from './rewrite'
-import type { Store } from '@tanstack/store'
+import { createRouterStores } from './stores'
 import type { LRUCache } from './lru-cache'
 import type {
   ProcessRouteTreeResult,
@@ -105,7 +103,7 @@ import type {
   AnySerializationAdapter,
   ValidateSerializableInput,
 } from './ssr/serializer/transformer'
-// import type { AnyRouterConfig } from './config'
+import type { GetStoreConfig, RouterStores } from './stores'
 
 export type ControllablePromise<T = any> = Promise<T> & {
   resolve: (value: T) => void
@@ -543,8 +541,6 @@ export interface RouterState<
   isLoading: boolean
   isTransitioning: boolean
   matches: Array<TRouteMatch>
-  pendingMatches?: Array<TRouteMatch>
-  cachedMatches: Array<TRouteMatch>
   location: ParsedLocation<FullSearchSchema<TRouteTree>>
   resolvedLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>
   statusCode: number
@@ -871,27 +867,20 @@ export type TrailingSlashOption =
 
 /**
  * Compute whether path, href or hash changed between previous and current
- * resolved locations in router state.
+ * resolved locations.
  */
-export function getLocationChangeInfo(routerState: {
-  resolvedLocation?: ParsedLocation
-  location: ParsedLocation
-}) {
-  const fromLocation = routerState.resolvedLocation
-  const toLocation = routerState.location
+export function getLocationChangeInfo(
+  location: ParsedLocation,
+  resolvedLocation?: ParsedLocation,
+) {
+  const fromLocation = resolvedLocation
+  const toLocation = location
   const pathChanged = fromLocation?.pathname !== toLocation.pathname
   const hrefChanged = fromLocation?.href !== toLocation.href
   const hashChanged = fromLocation?.hash !== toLocation.hash
   return { fromLocation, toLocation, pathChanged, hrefChanged, hashChanged }
 }
 
-function filterRedirectedCachedMatches<T extends { status: string }>(
-  matches: Array<T>,
-): Array<T> {
-  const filtered = matches.filter((d) => d.status !== 'redirected')
-  return filtered.length === matches.length ? matches : filtered
-}
-
 export type CreateRouterFn = <
   TRouteTree extends AnyRoute,
   TTrailingSlashOption extends TrailingSlashOption = 'never',
@@ -936,24 +925,6 @@ declare global {
  *
  * @link https://tanstack.com/router/latest/docs/framework/react/api/router/RouterType
  */
-type RouterStateStore<TState> = {
-  state: TState
-  setState: (updater: (prev: TState) => TState) => void
-}
-
-function createServerStore<TState>(
-  initialState: TState,
-): RouterStateStore<TState> {
-  const store = {
-    state: initialState,
-    setState: (updater: (prev: TState) => TState) => {
-      store.state = updater(store.state)
-    },
-  } as RouterStateStore<TState>
-
-  return store
-}
-
 export class RouterCore<
   in out TRouteTree extends AnyRoute,
   in out TTrailingSlashOption extends TrailingSlashOption,
@@ -974,7 +945,10 @@ export class RouterCore<
   isScrollRestorationSetup = false
 
   // Must build in constructor
-  __store!: Store<RouterState<TRouteTree>>
+  stores!: RouterStores<TRouteTree>
+  private getStoreConfig!: GetStoreConfig
+  batch!: (fn: () => void) => void
+
   options!: PickAsRequired<
     RouterOptions<
       TRouteTree,
@@ -1011,7 +985,10 @@ export class RouterCore<
       TRouterHistory,
       TDehydrated
     >,
+    getStoreConfig: GetStoreConfig,
   ) {
+    this.getStoreConfig = getStoreConfig
+
     this.update({
       defaultPreloadDelay: 50,
       defaultPendingMs: 1000,
@@ -1140,14 +1117,15 @@ export class RouterCore<
       this.setRoutes(processRouteTreeResult)
     }
 
-    if (!this.__store && this.latestLocation) {
-      if (isServer ?? this.isServer) {
-        this.__store = createServerStore(
-          getInitialRouterState(this.latestLocation),
-        ) as unknown as Store<any>
-      } else {
-        this.__store = createStore(getInitialRouterState(this.latestLocation))
+    if (!this.stores && this.latestLocation) {
+      const config = this.getStoreConfig(this)
+      this.batch = config.batch
+      this.stores = createRouterStores(
+        getInitialRouterState(this.latestLocation),
+        config,
+      )
 
+      if (!(isServer ?? this.isServer)) {
         setupScrollRestoration(this)
       }
     }
@@ -1188,11 +1166,8 @@ export class RouterCore<
       needsLocationUpdate = true
     }
 
-    if (needsLocationUpdate && this.__store) {
-      this.__store.setState((s) => ({
-        ...s,
-        location: this.latestLocation,
-      }))
+    if (needsLocationUpdate && this.stores) {
+      this.stores.location.setState(() => this.latestLocation)
     }
 
     if (
@@ -1207,7 +1182,7 @@ export class RouterCore<
   }
 
   get state(): RouterState<TRouteTree> {
-    return this.__store.state
+    return this.stores.__store.state
   }
 
   updateLatestLocation = () => {
@@ -1440,10 +1415,14 @@ export class RouterCore<
       : undefined
 
     const matches = new Array<AnyRouteMatch>(matchedRoutes.length)
-
-    const previousMatchesByRouteId = new Map(
-      this.state.matches.map((match) => [match.routeId, match]),
-    )
+    // Snapshot of active match state keyed by routeId, used to stabilise
+    // params/search across navigations.
+    const previousActiveMatchesByRouteId = new Map<string, AnyRouteMatch>()
+    for (const store of this.stores.activeMatchStoresById.values()) {
+      if (store.routeId) {
+        previousActiveMatchesByRouteId.set(store.routeId, store.state)
+      }
+    }
 
     for (let index = 0; index < matchedRoutes.length; index++) {
       const route = matchedRoutes[index]!
@@ -1528,7 +1507,7 @@ export class RouterCore<
 
       const existingMatch = this.getMatch(matchId)
 
-      const previousMatch = previousMatchesByRouteId.get(route.id)
+      const previousMatch = previousActiveMatchesByRouteId.get(route.id)
 
       const strictParams = existingMatch?._strictParams ?? usedParams
 
@@ -1644,7 +1623,7 @@ export class RouterCore<
       const existingMatch = this.getMatch(match.id)
 
       // Update the match's params
-      const previousMatch = previousMatchesByRouteId.get(match.routeId)
+      const previousMatch = previousActiveMatchesByRouteId.get(match.routeId)
       match.params = previousMatch
         ? nullReplaceEqualDeep(previousMatch.params, routeParams)
         : routeParams
@@ -1734,11 +1713,14 @@ export class RouterCore<
     }
 
     // Determine params: reuse from state if possible, otherwise parse
-    const lastStateMatch = last(this.state.matches)
+    const lastStateMatchId = last(this.stores.matchesId.state)
+    const lastStateMatch =
+      lastStateMatchId &&
+      this.stores.activeMatchStoresById.get(lastStateMatchId)?.state
     const canReuseParams =
       lastStateMatch &&
       lastStateMatch.routeId === lastRoute.id &&
-      location.pathname === this.state.location.pathname
+      lastStateMatch.pathname === location.pathname
 
     let params: Record<string, unknown>
     if (canReuseParams) {
@@ -1783,19 +1765,23 @@ export class RouterCore<
   }
 
   cancelMatches = () => {
-    const currentPendingMatches = this.state.matches.filter(
-      (match) => match.status === 'pending',
-    )
-    const currentLoadingMatches = this.state.matches.filter(
-      (match) => match.isFetching === 'loader',
-    )
-    const matchesToCancelArray = new Set([
-      ...(this.state.pendingMatches ?? []),
-      ...currentPendingMatches,
-      ...currentLoadingMatches,
-    ])
-    matchesToCancelArray.forEach((match) => {
-      this.cancelMatch(match.id)
+    this.stores.pendingMatchesId.state.forEach((matchId) => {
+      this.cancelMatch(matchId)
+    })
+
+    this.stores.matchesId.state.forEach((matchId) => {
+      if (this.stores.pendingMatchStoresById.has(matchId)) {
+        return
+      }
+
+      const match = this.stores.activeMatchStoresById.get(matchId)?.state
+      if (!match) {
+        return
+      }
+
+      if (match.status === 'pending' || match.isFetching === 'loader') {
+        this.cancelMatch(matchId)
+      }
     })
   }
 
@@ -2368,26 +2354,28 @@ export class RouterCore<
     // Match the routes
     const pendingMatches = this.matchRoutes(this.latestLocation)
 
+    const nextCachedMatches = this.stores.cachedMatchesSnapshot.state.filter(
+      (d) => !pendingMatches.some((e) => e.id === d.id),
+    )
+
     // Ingest the new matches
-    this.__store.setState((s) => ({
-      ...s,
-      status: 'pending',
-      statusCode: 200,
-      isLoading: true,
-      location: this.latestLocation,
-      pendingMatches,
-      // If a cached moved to pendingMatches, remove it from cachedMatches
-      cachedMatches: s.cachedMatches.filter(
-        (d) => !pendingMatches.some((e) => e.id === d.id),
-      ),
-    }))
+    this.batch(() => {
+      this.stores.status.setState(() => 'pending')
+      this.stores.statusCode.setState(() => 200)
+      this.stores.isLoading.setState(() => true)
+      this.stores.location.setState(() => this.latestLocation)
+      this.stores.setPendingMatches(pendingMatches)
+      // If a cached match moved to pending matches, remove it from cached matches
+      this.stores.setCachedMatches(nextCachedMatches)
+    })
   }
 
   load: LoadFn = async (opts?: { sync?: boolean }): Promise<void> => {
     let redirect: AnyRedirect | undefined
     let notFound: NotFoundError | undefined
     let loadPromise: Promise<void>
-    const previousLocation = this.state.resolvedLocation ?? this.state.location
+    const previousLocation =
+      this.stores.resolvedLocation.state ?? this.stores.location.state
 
     // eslint-disable-next-line prefer-const
     loadPromise = new Promise<void>((resolve) => {
@@ -2395,31 +2383,26 @@ export class RouterCore<
         try {
           this.beforeLoad()
           const next = this.latestLocation
-          const prevLocation = this.state.resolvedLocation
+          const prevLocation = this.stores.resolvedLocation.state
+          const locationChangeInfo = getLocationChangeInfo(next, prevLocation)
 
-          if (!this.state.redirect) {
+          if (!this.stores.redirect.state) {
             this.emit({
               type: 'onBeforeNavigate',
-              ...getLocationChangeInfo({
-                resolvedLocation: prevLocation,
-                location: next,
-              }),
+              ...locationChangeInfo,
             })
           }
 
           this.emit({
             type: 'onBeforeLoad',
-            ...getLocationChangeInfo({
-              resolvedLocation: prevLocation,
-              location: next,
-            }),
+            ...locationChangeInfo,
           })
 
           await loadMatches({
             router: this,
             sync: opts?.sync,
             forceStaleReload: previousLocation.href === next.href,
-            matches: this.state.pendingMatches as Array<AnyRouteMatch>,
+            matches: this.stores.pendingMatchesSnapshot.state,
             location: next,
             updateMatch: this.updateMatch,
             // eslint-disable-next-line @typescript-eslint/require-await
@@ -2434,80 +2417,92 @@ export class RouterCore<
                   //
                   // exitingMatches uses match.id (routeId + params + loaderDeps) so
                   // navigating /foo?page=1 → /foo?page=2 correctly caches the page=1 entry.
-                  let exitingMatches: Array<AnyRouteMatch> = []
+                  let exitingMatches: Array<AnyRouteMatch> | null = null
 
                   // Lifecycle-hook identity uses routeId only so that navigating between
                   // different params/deps of the same route fires onStay (not onLeave+onEnter).
-                  let hookExitingMatches: Array<AnyRouteMatch> = []
-                  let hookEnteringMatches: Array<AnyRouteMatch> = []
-                  let hookStayingMatches: Array<AnyRouteMatch> = []
-
-                  batch(() => {
-                    this.__store.setState((s) => {
-                      const previousMatches = s.matches
-                      const newMatches = s.pendingMatches || s.matches
-
-                      exitingMatches = previousMatches.filter(
-                        (match) => !newMatches.some((d) => d.id === match.id),
-                      )
-
-                      // Lifecycle-hook identity: routeId only (route presence in tree)
-                      hookExitingMatches = previousMatches.filter(
-                        (match) =>
-                          !newMatches.some((d) => d.routeId === match.routeId),
-                      )
-                      hookEnteringMatches = newMatches.filter(
-                        (match) =>
-                          !previousMatches.some(
-                            (d) => d.routeId === match.routeId,
-                          ),
-                      )
-                      hookStayingMatches = newMatches.filter((match) =>
-                        previousMatches.some(
-                          (d) => d.routeId === match.routeId,
+                  let hookExitingMatches: Array<AnyRouteMatch> | null = null
+                  let hookEnteringMatches: Array<AnyRouteMatch> | null = null
+                  let hookStayingMatches: Array<AnyRouteMatch> | null = null
+
+                  this.batch(() => {
+                    const pendingMatches =
+                      this.stores.pendingMatchesSnapshot.state
+                    const mountPending = pendingMatches.length
+                    const currentMatches =
+                      this.stores.activeMatchesSnapshot.state
+
+                    exitingMatches = mountPending
+                      ? currentMatches.filter(
+                          (match) =>
+                            !this.stores.pendingMatchStoresById.has(match.id),
+                        )
+                      : null
+
+                    // Lifecycle-hook identity: routeId only (route presence in tree)
+                    // Build routeId sets from pools to avoid derived stores.
+                    const pendingRouteIds = new Set<string>()
+                    for (const s of this.stores.pendingMatchStoresById.values()) {
+                      if (s.routeId) pendingRouteIds.add(s.routeId)
+                    }
+                    const activeRouteIds = new Set<string>()
+                    for (const s of this.stores.activeMatchStoresById.values()) {
+                      if (s.routeId) activeRouteIds.add(s.routeId)
+                    }
+
+                    hookExitingMatches = mountPending
+                      ? currentMatches.filter(
+                          (match) => !pendingRouteIds.has(match.routeId),
+                        )
+                      : null
+                    hookEnteringMatches = mountPending
+                      ? pendingMatches.filter(
+                          (match) => !activeRouteIds.has(match.routeId),
+                        )
+                      : null
+                    hookStayingMatches = mountPending
+                      ? pendingMatches.filter((match) =>
+                          activeRouteIds.has(match.routeId),
+                        )
+                      : currentMatches
+
+                    this.stores.isLoading.setState(() => false)
+                    this.stores.loadedAt.setState(() => Date.now())
+                    /**
+                     * When committing new matches, cache any exiting matches that are still usable.
+                     * Routes that resolved with `status: 'error'` or `status: 'notFound'` are
+                     * deliberately excluded from `cachedMatches` so that subsequent invalidations
+                     * or reloads re-run their loaders instead of reusing the failed/not-found data.
+                     */
+                    if (mountPending) {
+                      this.stores.setActiveMatches(pendingMatches)
+                      this.stores.setPendingMatches([])
+                      this.stores.setCachedMatches([
+                        ...this.stores.cachedMatchesSnapshot.state,
+                        ...exitingMatches!.filter(
+                          (d) =>
+                            d.status !== 'error' &&
+                            d.status !== 'notFound' &&
+                            d.status !== 'redirected',
                         ),
-                      )
-
-                      return {
-                        ...s,
-                        isLoading: false,
-                        loadedAt: Date.now(),
-                        matches: newMatches,
-                        pendingMatches: undefined,
-                        /**
-                         * When committing new matches, cache any exiting matches that are still usable.
-                         * Routes that resolved with `status: 'error'` or `status: 'notFound'` are
-                         * deliberately excluded from `cachedMatches` so that subsequent invalidations
-                         * or reloads re-run their loaders instead of reusing the failed/not-found data.
-                         */
-                        cachedMatches: [
-                          ...s.cachedMatches,
-                          ...exitingMatches.filter(
-                            (d) =>
-                              d.status !== 'error' &&
-                              d.status !== 'notFound' &&
-                              d.status !== 'redirected',
-                          ),
-                        ],
-                      }
-                    })
-                    this.clearExpiredCache()
+                      ])
+                      this.clearExpiredCache()
+                    }
                   })
 
                   //
-                  ;(
-                    [
-                      [hookExitingMatches, 'onLeave'],
-                      [hookEnteringMatches, 'onEnter'],
-                      [hookStayingMatches, 'onStay'],
-                    ] as const
-                  ).forEach(([matches, hook]) => {
-                    matches.forEach((match) => {
+                  for (const [matches, hook] of [
+                    [hookExitingMatches, 'onLeave'],
+                    [hookEnteringMatches, 'onEnter'],
+                    [hookStayingMatches, 'onStay'],
+                  ] as const) {
+                    if (!matches) continue
+                    for (const match of matches as Array<AnyRouteMatch>) {
                       this.looseRoutesById[match.routeId]!.options[hook]?.(
                         match,
                       )
-                    })
-                  })
+                    }
+                  }
                 })
               })
             },
@@ -2526,17 +2521,20 @@ export class RouterCore<
             notFound = err
           }
 
-          this.__store.setState((s) => ({
-            ...s,
-            statusCode: redirect
-              ? redirect.status
-              : notFound
-                ? 404
-                : s.matches.some((d) => d.status === 'error')
-                  ? 500
-                  : 200,
-            redirect,
-          }))
+          const nextStatusCode = redirect
+            ? redirect.status
+            : notFound
+              ? 404
+              : this.stores.activeMatchesSnapshot.state.some(
+                    (d) => d.status === 'error',
+                  )
+                ? 500
+                : 200
+
+          this.batch(() => {
+            this.stores.statusCode.setState(() => nextStatusCode)
+            this.stores.redirect.setState(() => redirect)
+          })
         }
 
         if (this.latestLoadPromise === loadPromise) {
@@ -2563,14 +2561,13 @@ export class RouterCore<
     let newStatusCode: number | undefined = undefined
     if (this.hasNotFoundMatch()) {
       newStatusCode = 404
-    } else if (this.__store.state.matches.some((d) => d.status === 'error')) {
+    } else if (
+      this.stores.activeMatchesSnapshot.state.some((d) => d.status === 'error')
+    ) {
       newStatusCode = 500
     }
     if (newStatusCode !== undefined) {
-      this.__store.setState((s) => ({
-        ...s,
-        statusCode: newStatusCode,
-      }))
+      this.stores.statusCode.setState(() => newStatusCode)
     }
   }
 
@@ -2599,15 +2596,12 @@ export class RouterCore<
         this.isViewTransitionTypesSupported
       ) {
         const next = this.latestLocation
-        const prevLocation = this.state.resolvedLocation
+        const prevLocation = this.stores.resolvedLocation.state
 
         const resolvedViewTransitionTypes =
           typeof shouldViewTransition.types === 'function'
             ? shouldViewTransition.types(
-                getLocationChangeInfo({
-                  resolvedLocation: prevLocation,
-                  location: next,
-                }),
+                getLocationChangeInfo(next, prevLocation),
               )
             : shouldViewTransition.types
 
@@ -2632,40 +2626,40 @@ export class RouterCore<
 
   updateMatch: UpdateMatchFn = (id, updater) => {
     this.startTransition(() => {
-      const matchesKey = this.state.pendingMatches?.some((d) => d.id === id)
-        ? 'pendingMatches'
-        : this.state.matches.some((d) => d.id === id)
-          ? 'matches'
-          : this.state.cachedMatches.some((d) => d.id === id)
-            ? 'cachedMatches'
-            : ''
-
-      if (matchesKey) {
-        if (matchesKey === 'cachedMatches') {
-          this.__store.setState((s) => ({
-            ...s,
-            cachedMatches: filterRedirectedCachedMatches(
-              s.cachedMatches.map((d) => (d.id === id ? updater(d) : d)),
-            ),
-          }))
+      const pendingMatch = this.stores.pendingMatchStoresById.get(id)
+      if (pendingMatch) {
+        pendingMatch.setState(updater)
+        return
+      }
+
+      const activeMatch = this.stores.activeMatchStoresById.get(id)
+      if (activeMatch) {
+        activeMatch.setState(updater)
+        return
+      }
+
+      const cachedMatch = this.stores.cachedMatchStoresById.get(id)
+      if (cachedMatch) {
+        const next = updater(cachedMatch.state)
+        if (next.status === 'redirected') {
+          const deleted = this.stores.cachedMatchStoresById.delete(id)
+          if (deleted) {
+            this.stores.cachedMatchesId.setState((prev) =>
+              prev.filter((matchId) => matchId !== id),
+            )
+          }
         } else {
-          this.__store.setState((s) => ({
-            ...s,
-            [matchesKey]: s[matchesKey]?.map((d) =>
-              d.id === id ? updater(d) : d,
-            ),
-          }))
+          cachedMatch.setState(() => next)
         }
       }
     })
   }
 
   getMatch: GetMatchFn = (matchId: string): AnyRouteMatch | undefined => {
-    const findFn = (d: { id: string }) => d.id === matchId
     return (
-      this.state.cachedMatches.find(findFn) ??
-      this.state.pendingMatches?.find(findFn) ??
-      this.state.matches.find(findFn)
+      this.stores.cachedMatchStoresById.get(matchId)?.state ??
+      this.stores.pendingMatchStoresById.get(matchId)?.state ??
+      this.stores.activeMatchStoresById.get(matchId)?.state
     )
   }
 
@@ -2701,12 +2695,17 @@ export class RouterCore<
       return d
     }
 
-    this.__store.setState((s) => ({
-      ...s,
-      matches: s.matches.map(invalidate),
-      cachedMatches: s.cachedMatches.map(invalidate),
-      pendingMatches: s.pendingMatches?.map(invalidate),
-    }))
+    this.batch(() => {
+      this.stores.setActiveMatches(
+        this.stores.activeMatchesSnapshot.state.map(invalidate),
+      )
+      this.stores.setCachedMatches(
+        this.stores.cachedMatchesSnapshot.state.map(invalidate),
+      )
+      this.stores.setPendingMatches(
+        this.stores.pendingMatchesSnapshot.state.map(invalidate),
+      )
+    })
 
     this.shouldViewTransition = false
     return this.load({ sync: opts?.sync })
@@ -2763,25 +2762,18 @@ export class RouterCore<
   clearCache: ClearCacheFn<this> = (opts) => {
     const filter = opts?.filter
     if (filter !== undefined) {
-      this.__store.setState((s) => {
-        return {
-          ...s,
-          cachedMatches: s.cachedMatches.filter(
-            (m) => !filter(m as MakeRouteMatchUnion<this>),
-          ),
-        }
-      })
+      this.stores.setCachedMatches(
+        this.stores.cachedMatchesSnapshot.state.filter(
+          (m) => !filter(m as MakeRouteMatchUnion<this>),
+        ),
+      )
     } else {
-      this.__store.setState((s) => {
-        return {
-          ...s,
-          cachedMatches: [],
-        }
-      })
+      this.stores.setCachedMatches([])
     }
   }
 
   clearExpiredCache = () => {
+    const now = Date.now()
     // This is where all of the garbage collection magic happens
     const filter = (d: MakeRouteMatch<TRouteTree>) => {
       const route = this.looseRoutesById[d.routeId]!
@@ -2801,7 +2793,7 @@ export class RouterCore<
       const isError = d.status === 'error'
       if (isError) return true
 
-      const gcEligible = Date.now() - d.updatedAt >= gcTime
+      const gcEligible = now - d.updatedAt >= gcTime
       return gcEligible
     }
     this.clearCache({ filter })
@@ -2823,28 +2815,24 @@ export class RouterCore<
       dest: opts,
     })
 
-    const activeMatchIds = new Set(
-      [...this.state.matches, ...(this.state.pendingMatches ?? [])].map(
-        (d) => d.id,
-      ),
-    )
+    const activeMatchIds = new Set([
+      ...this.stores.matchesId.state,
+      ...this.stores.pendingMatchesId.state,
+    ])
 
     const loadedMatchIds = new Set([
       ...activeMatchIds,
-      ...this.state.cachedMatches.map((d) => d.id),
+      ...this.stores.cachedMatchesId.state,
     ])
 
-    // If the matches are already loaded, we need to add them to the cachedMatches
-    batch(() => {
-      matches.forEach((match) => {
-        if (!loadedMatchIds.has(match.id)) {
-          this.__store.setState((s) => ({
-            ...s,
-            cachedMatches: [...(s.cachedMatches as any), match],
-          }))
-        }
-      })
-    })
+    // If the matches are already loaded, we need to add them to the cached matches.
+    const matchesToCache = matches.filter(
+      (match) => !loadedMatchIds.has(match.id),
+    )
+    if (matchesToCache.length) {
+      const cachedMatches = this.stores.cachedMatchesSnapshot.state
+      this.stores.setCachedMatches([...cachedMatches, ...matchesToCache])
+    }
 
     try {
       matches = await loadMatches({
@@ -2898,16 +2886,16 @@ export class RouterCore<
     }
     const next = this.buildLocation(matchLocation as any)
 
-    if (opts?.pending && this.state.status !== 'pending') {
+    if (opts?.pending && this.stores.status.state !== 'pending') {
       return false
     }
 
     const pending =
-      opts?.pending === undefined ? !this.state.isLoading : opts.pending
+      opts?.pending === undefined ? !this.stores.isLoading.state : opts.pending
 
     const baseLocation = pending
       ? this.latestLocation
-      : this.state.resolvedLocation || this.state.location
+      : this.stores.resolvedLocation.state || this.stores.location.state
 
     const match = findSingleMatch(
       next.pathname,
@@ -2943,7 +2931,7 @@ export class RouterCore<
   serverSsr?: ServerSsr
 
   hasNotFoundMatch = () => {
-    return this.__store.state.matches.some(
+    return this.stores.activeMatchesSnapshot.state.some(
       (d) => d.status === 'notFound' || d.globalNotFound,
     )
   }
@@ -2989,8 +2977,6 @@ export function getInitialRouterState(
     resolvedLocation: undefined,
     location,
     matches: [],
-    pendingMatches: [],
-    cachedMatches: [],
     statusCode: 200,
   }
 }