fix: upgrade TanStack Store to latest

packages/react-router/package.json

@@ -93,7 +93,7 @@
   },
   "dependencies": {
     "@tanstack/history": "workspace:*",
-    "@tanstack/react-store": "^0.9.3",
+    "@tanstack/react-store": "^0.11.0",
     "@tanstack/router-core": "workspace:*",
     "isbot": "^5.1.22"
   },

packages/react-router/src/Match.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import {
   createControlledPromise,
   getLocationChangeInfo,
@@ -40,6 +40,13 @@ const outletMatchSelectionEqual = (
   b: OutletMatchSelection,
 ) => a[0] === b[0] && a[1] === b[1]
 
+const emptyMatchStore = {
+  get: () => undefined as AnyRouteMatch | undefined,
+  subscribe: (_listener: (value: AnyRouteMatch | undefined) => void) => ({
+    unsubscribe() {},
+  }),
+}
+
 export const Match = React.memo(function MatchImpl({
   matchId,
 }: {
@@ -93,9 +100,11 @@ export const Match = React.memo(function MatchImpl({
     invariant()
   }
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const resetKey = useStore(router.stores.loadedAt, (loadedAt) => loadedAt)
+  const resetKey = useSelector(router.stores.loadedAt)
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const match = useStore(matchStore, (value) => value, matchViewFieldsEqual)
+  const match = useSelector(matchStore, (value) => value, {
+    compare: matchViewFieldsEqual,
+  })
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const matchState = React.useMemo(() => {
     const routeId = match.routeId as string
@@ -258,7 +267,7 @@ function OnRendered() {
     ParsedLocation<any> | undefined
   >()
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const renderedLocationKey = useStore(
+  const renderedLocationKey = useSelector(
     router.stores.resolvedLocation,
     (resolvedLocation) => resolvedLocation?.state.__TSR_key,
   )
@@ -401,7 +410,7 @@ export const MatchInner = React.memo(function MatchInnerImpl({
     invariant()
   }
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const match = useStore(matchStore, (value) => value)
+  const match = useSelector(matchStore)
   const routeId = match.routeId as string
   const route = router.routesById[routeId] as AnyRoute
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -550,21 +559,21 @@ export const Outlet = React.memo(function OutletImpl() {
     // Subscribe directly to the match store from the pool instead of
     // the two-level byId → matchStore pattern.
     const parentMatchStore = matchId
-      ? router.stores.matchStores.get(matchId)
-      : undefined
+      ? (router.stores.matchStores.get(matchId) ?? emptyMatchStore)
+      : emptyMatchStore
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    ;[routeId, parentGlobalNotFound] = useStore(
+    ;[routeId, parentGlobalNotFound] = useSelector(
       parentMatchStore,
       (match): OutletMatchSelection => [
         match?.routeId as string | undefined,
         match?.globalNotFound ?? false,
       ],
-      outletMatchSelectionEqual,
+      { compare: outletMatchSelectionEqual },
     )
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    childMatchId = useStore(router.stores.matchesId, (ids) => {
+    childMatchId = useSelector(router.stores.matchesId, (ids) => {
       const index = ids.findIndex((id) => id === matchId)
       return ids[index + 1]
     })

packages/react-router/src/Matches.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
@@ -80,11 +80,11 @@ function MatchesInner() {
   const matchId = _isServer
     ? router.stores.firstId.get()
     : // eslint-disable-next-line react-hooks/rules-of-hooks
-      useStore(router.stores.firstId, (id) => id)
+      useSelector(router.stores.firstId)
   const resetKey = _isServer
     ? router.stores.loadedAt.get()
     : // eslint-disable-next-line react-hooks/rules-of-hooks
-      useStore(router.stores.loadedAt, (loadedAt) => loadedAt)
+      useSelector(router.stores.loadedAt)
 
   const matchComponent = matchId ? <Match matchId={matchId} /> : null
 
@@ -143,7 +143,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
 
   if (!(isServer ?? router.isServer)) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useStore(router.stores.matchRouteDeps, (d) => d)
+    useSelector(router.stores.matchRouteDeps)
   }
 
   return React.useCallback(
@@ -247,7 +247,7 @@ export function useMatches<
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(
+  return useSelector(
     router.stores.matches,
     // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
     useStructuralSharing(opts, router),

packages/react-router/src/Scripts.tsx

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { deepEqual } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { Asset } from './Asset'
@@ -74,13 +74,13 @@ export const Scripts = () => {
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const assetScripts = useStore(
-    router.stores.matches,
-    getAssetScripts,
-    deepEqual,
-  )
+  const assetScripts = useSelector(router.stores.matches, getAssetScripts, {
+    compare: deepEqual,
+  })
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const scripts = useStore(router.stores.matches, getScripts, deepEqual)
+  const scripts = useSelector(router.stores.matches, getScripts, {
+    compare: deepEqual,
+  })
 
   return renderScripts(router, scripts, assetScripts)
 }

packages/react-router/src/Transitioner.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { batch, useStore } from '@tanstack/react-store'
+import { batch, useSelector } from '@tanstack/react-store'
 import { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core'
 import { useLayoutEffect, usePrevious } from './utils'
 import { useRouter } from './useRouter'
@@ -12,8 +12,8 @@ export function Transitioner() {
 
   const [isTransitioning, setIsTransitioning] = React.useState(false)
   // Track pending state changes
-  const isLoading = useStore(router.stores.isLoading, (value) => value)
-  const hasPending = useStore(router.stores.hasPending, (value) => value)
+  const isLoading = useSelector(router.stores.isLoading)
+  const hasPending = useSelector(router.stores.hasPending)
 
   const previousIsLoading = usePrevious(isLoading)
 

packages/react-router/src/headContentUtils.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import {
   appendUniqueUserTags,
   deepEqual,
@@ -204,14 +204,14 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const routeMeta = useStore(
+  const routeMeta = useSelector(
     router.stores.matches,
     (matches) => {
       return matches
         .map((match) => match.meta)
         .filter((meta) => meta !== undefined)
     },
-    deepEqual,
+    { compare: deepEqual },
   )
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
@@ -287,7 +287,7 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
   }, [routeMeta, nonce])
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const links = useStore(
+  const links = useSelector(
     router.stores.matches,
     (matches) => {
       const constructed = matches
@@ -303,11 +303,11 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
 
       return constructed
     },
-    deepEqual,
+    { compare: deepEqual },
   )
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const manifestCssTags = useStore(
+  const manifestCssTags = useSelector(
     router.stores.matches,
     (matches) => {
       const manifest = router.ssr?.manifest
@@ -349,11 +349,11 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
 
       return tags
     },
-    deepEqual,
+    { compare: deepEqual },
   )
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const preloadLinks = useStore(
+  const preloadLinks = useSelector(
     router.stores.matches,
     (matches) => {
       const preloadLinks: Array<RouterManagedTag> = []
@@ -377,11 +377,11 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
 
       return preloadLinks
     },
-    deepEqual,
+    { compare: deepEqual },
   )
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const styles = useStore(
+  const styles = useSelector(
     router.stores.matches,
     (matches) => {
       return matches
@@ -396,11 +396,11 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
           children: children as string | undefined,
         })) satisfies Array<RouterManagedTag>
     },
-    deepEqual,
+    { compare: deepEqual },
   )
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const headScripts: Array<RouterManagedTag> = useStore(
+  const headScripts: Array<RouterManagedTag> = useSelector(
     router.stores.matches,
     (matches) => {
       return matches
@@ -415,7 +415,7 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
           children: children as string | undefined,
         })) satisfies Array<RouterManagedTag>
     },
-    deepEqual,
+    { compare: deepEqual },
   )
 
   const tags: Array<RouterManagedTag> = []

packages/react-router/src/link.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { flushSync } from 'react-dom'
 import {
   deepEqual,
@@ -400,11 +400,9 @@ export function useLinkProps<
   )
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const currentLocation = useStore(
-    router.stores.location,
-    (l) => l,
-    (prev, next) => prev.href === next.href,
-  )
+  const currentLocation = useSelector(router.stores.location, (l) => l, {
+    compare: (prev, next) => prev.href === next.href,
+  })
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const next = React.useMemo(() => {

packages/react-router/src/not-found.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { isNotFound } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { CatchBoundary } from './CatchBoundary'
 import { useRouter } from './useRouter'
 import type { ErrorInfo } from 'react'
@@ -44,12 +44,12 @@ export function CatchNotFound(props: {
 
   // TODO: Some way for the user to programmatically reset the not-found boundary?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const pathname = useStore(
+  const pathname = useSelector(
     router.stores.location,
     (location) => location.pathname,
   )
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const status = useStore(router.stores.status, (status) => status)
+  const status = useSelector(router.stores.status)
   const resetKey = `not-found-${pathname}-${status}`
 
   return (

packages/react-router/src/useCanGoBack.ts

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
 
@@ -10,7 +10,7 @@ export function useCanGoBack() {
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(
+  return useSelector(
     router.stores.location,
     (location) => location.state.__TSR_index !== 0,
   )

packages/react-router/src/useLocation.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
 import { useStructuralSharing } from './useMatch'
@@ -60,7 +60,7 @@ export function useLocation<
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(
+  return useSelector(
     router.stores.location,
     // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
     useStructuralSharing(opts, router),

packages/react-router/src/useMatch.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { invariant, replaceEqualDeep } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { dummyMatchContext, matchContext } from './matchContext'
@@ -179,7 +179,7 @@ export function useMatch<
     useStructuralSharing(opts, router)
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const matchSelection = useStore(matchStore ?? dummyStore, (match) =>
+  const matchSelection = useSelector(matchStore ?? dummyStore, (match) =>
     match ? selector(match as any) : dummyStore,
   )
 

packages/react-router/src/useRouterState.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
 import { useStructuralSharing } from './useMatch'
@@ -68,7 +68,7 @@ export function useRouterState<
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(
+  return useSelector(
     router.stores.__store,
     // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
     useStructuralSharing(opts, router),

packages/router-core/package.json

@@ -188,7 +188,7 @@
     "seroval-plugins": "^1.5.4"
   },
   "devDependencies": {
-    "@tanstack/store": "^0.9.3",
+    "@tanstack/store": "^0.11.0",
     "@types/node": "25.0.9",
     "esbuild": "^0.27.4",
     "vite": "*"