@depup/tanstack__react-router 1.167.5-depup.0 → 1.168.2-depup.0

package/dist/llms/rules/guide.js

@@ -8384,7 +8384,9 @@ For validation libraries we recommend using adapters which infer the correct \`i
 
 ### Zod
 
-An adapter is provided for [Zod](https://zod.dev/) which will pipe through the correct \`input\` type and \`output\` type
+An adapter is provided for [Zod](https://zod.dev/) which will pipe through the correct \`input\` type and \`output\` type.
+
+For Zod v3:
 
 \`\`\`tsx
 import { zodValidator } from '@tanstack/zod-adapter'
@@ -8401,13 +8403,30 @@ export const Route = createFileRoute('/shop/products/')({
 })
 \`\`\`
 
-The important part here is the following use of \`Link\` no longer requires \`search\` params
+With Zod v4, you should directly use the schema in \`validateSearch\`:
+
+\`\`\`tsx
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  page: z.number().default(1),
+  filter: z.string().default(''),
+  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
+})
+
+export const Route = createFileRoute('/shop/products/')({
+  // With Zod v4, we can use the schema without the adapter
+  validateSearch: productSearchSchema,
+})
+\`\`\`
+
+The important part here is the following use of \`Link\` no longer requires \`search\` params:
 
 \`\`\`tsx
 <Link to="/shop/products" />
 \`\`\`
 
-However the use of \`catch\` here overrides the types and makes \`page\`, \`filter\` and \`sort\` \`unknown\` causing type loss. We have handled this case by providing a \`fallback\` generic function which retains the types but provides a \`fallback\` value when validation fails
+In Zod v3, the use of \`catch\` here overrides the types and makes \`page\`, \`filter\` and \`sort\` \`unknown\` causing type loss. We have handled this case by providing a \`fallback\` generic function which retains the types but provides a \`fallback\` value when validation fails:
 
 \`\`\`tsx
 import { fallback, zodValidator } from '@tanstack/zod-adapter'
@@ -8428,7 +8447,9 @@ export const Route = createFileRoute('/shop/products/')({
 
 Therefore when navigating to this route, \`search\` is optional and retains the correct types.
 
-While not recommended, it is also possible to configure \`input\` and \`output\` type in case the \`output\` type is more accurate than the \`input\` type
+In Zod v4, schemas may use \`catch\` instead of the fallback and will retain type inference throughout.
+
+While not recommended, it is also possible to configure \`input\` and \`output\` type in case the \`output\` type is more accurate than the \`input\` type:
 
 \`\`\`tsx
 const productSearchSchema = z.object({
@@ -8645,7 +8666,7 @@ Now that you've learned how to read your route's search params, you'll be happy
 
 The best way to update search params is to use the \`search\` prop on the \`<Link />\` component.
 
-If the search for the current page shall be updated and the \`from\` prop is specified, the \`to\` prop can be omitted.  
+If the search for the current page shall be updated and the \`from\` prop is specified, the \`to\` prop can be omitted.
 Here's an example:
 
 \`\`\`tsx title="src/routes/shop/products.tsx"
@@ -8666,7 +8687,7 @@ const ProductList = () => {
 
 If you want to update the search params in a generic component that is rendered on multiple routes, specifying \`from\` can be challenging.
 
-In this scenario you can set \`to="."\` which will give you access to loosely typed search params.  
+In this scenario you can set \`to="."\` which will give you access to loosely typed search params.
 Here is an example that illustrates this:
 
 \`\`\`tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depup/tanstack__react-router",
-  "version": "1.167.5-depup.0",
+  "version": "1.168.2-depup.0",
   "description": "Modern and scalable routing for React applications (with updated dependencies)",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -87,10 +87,8 @@
   "dependencies": {
     "@tanstack/react-store": "^0.9.2",
     "isbot": "^5.1.36",
-    "tiny-invariant": "^1.3.3",
-    "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.161.6",
-    "@tanstack/router-core": "1.167.5"
+    "@tanstack/router-core": "1.168.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -128,19 +126,15 @@
   },
   "depup": {
     "changes": {
-      "@tanstack/react-store": {
-        "from": "^0.9.1",
-        "to": "^0.9.2"
-      },
       "isbot": {
         "from": "^5.1.22",
         "to": "^5.1.36"
       }
     },
-    "depsUpdated": 2,
+    "depsUpdated": 1,
     "originalPackage": "@tanstack/react-router",
-    "originalVersion": "1.167.5",
-    "processedAt": "2026-03-18T17:27:34.273Z",
+    "originalVersion": "1.168.2",
+    "processedAt": "2026-03-22T12:15:25.312Z",
     "smokeTest": "passed"
   }
 }

package/src/Match.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react'
-import invariant from 'tiny-invariant'
-import warning from 'tiny-warning'
+import { useStore } from '@tanstack/react-store'
 import {
   createControlledPromise,
   getLocationChangeInfo,
+  invariant,
   isNotFound,
   isRedirect,
   rootRouteId,
 } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import { CatchNotFound } from './not-found'
 import { matchContext } from './matchContext'
@@ -30,25 +29,98 @@ export const Match = React.memo(function MatchImpl({
   matchId: string
 }) {
   const router = useRouter()
-  const matchState = useRouterState({
-    select: (s) => {
-      const matchIndex = s.matches.findIndex((d) => d.id === matchId)
-      const match = s.matches[matchIndex]
-      invariant(
-        match,
-        `Could not find match for matchId "${matchId}". Please file an issue!`,
-      )
-      return {
-        routeId: match.routeId,
-        ssr: match.ssr,
-        _displayPending: match._displayPending,
-        resetKey: s.loadedAt,
-        parentRouteId: s.matches[matchIndex - 1]?.routeId as string,
+
+  if (isServer ?? router.isServer) {
+    const match = router.stores.activeMatchStoresById.get(matchId)?.state
+    if (!match) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find match for matchId "${matchId}". Please file an issue!`,
+        )
       }
-    },
-    structuralSharing: true as any,
-  })
 
+      invariant()
+    }
+
+    const routeId = match.routeId as string
+    const parentRouteId = (router.routesById[routeId] as AnyRoute).parentRoute
+      ?.id
+
+    return (
+      <MatchView
+        router={router}
+        matchId={matchId}
+        resetKey={router.stores.loadedAt.state}
+        matchState={{
+          routeId,
+          ssr: match.ssr,
+          _displayPending: match._displayPending,
+          parentRouteId,
+        }}
+      />
+    )
+  }
+
+  // Subscribe directly to the match store from the pool.
+  // The matchId prop is stable for this component's lifetime (set by Outlet),
+  // and reconcileMatchPool reuses stores for the same matchId.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const matchStore = router.stores.activeMatchStoresById.get(matchId)
+  if (!matchStore) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `Invariant failed: Could not find match for matchId "${matchId}". Please file an issue!`,
+      )
+    }
+
+    invariant()
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const resetKey = useStore(router.stores.loadedAt, (loadedAt) => loadedAt)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const match = useStore(matchStore, (value) => value)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const matchState = React.useMemo(() => {
+    const routeId = match.routeId as string
+    const parentRouteId = (router.routesById[routeId] as AnyRoute).parentRoute
+      ?.id
+
+    return {
+      routeId,
+      ssr: match.ssr,
+      _displayPending: match._displayPending,
+      parentRouteId: parentRouteId as string | undefined,
+    } satisfies MatchViewState
+  }, [match._displayPending, match.routeId, match.ssr, router.routesById])
+
+  return (
+    <MatchView
+      router={router}
+      matchId={matchId}
+      resetKey={resetKey}
+      matchState={matchState}
+    />
+  )
+})
+
+type MatchViewState = {
+  routeId: string
+  ssr: boolean | 'data-only' | undefined
+  _displayPending: boolean | undefined
+  parentRouteId: string | undefined
+}
+
+function MatchView({
+  router,
+  matchId,
+  resetKey,
+  matchState,
+}: {
+  router: ReturnType<typeof useRouter>
+  matchId: string
+  resetKey: number
+  matchState: MatchViewState
+}) {
   const route: AnyRoute = router.routesById[matchState.routeId]
 
   const PendingComponent =
@@ -94,12 +166,14 @@ export const Match = React.memo(function MatchImpl({
       <matchContext.Provider value={matchId}>
         <ResolvedSuspenseBoundary fallback={pendingElement}>
           <ResolvedCatchBoundary
-            getResetKey={() => matchState.resetKey}
+            getResetKey={() => resetKey}
             errorComponent={routeErrorComponent || ErrorComponent}
             onCatch={(error, errorInfo) => {
               // Forward not found errors (we don't want to show the error component for these)
               if (isNotFound(error)) throw error
-              warning(false, `Error in route match: ${matchId}`)
+              if (process.env.NODE_ENV !== 'production') {
+                console.warn(`Warning: Error in route match: ${matchId}`)
+              }
               routeOnCatch?.(error, errorInfo)
             }}
           >
@@ -137,7 +211,7 @@ export const Match = React.memo(function MatchImpl({
       ) : null}
     </ShellComponent>
   )
-})
+}
 
 // On Rendered can't happen above the root layout because it actually
 // renders a dummy dom element to track the rendered state of the app.
@@ -165,7 +239,10 @@ function OnRendered() {
         ) {
           router.emit({
             type: 'onRendered',
-            ...getLocationChangeInfo(router.state),
+            ...getLocationChangeInfo(
+              router.stores.location.state,
+              router.stores.resolvedLocation.state,
+            ),
           })
           prevLocationRef.current = router.latestLocation
         }
@@ -181,39 +258,123 @@ export const MatchInner = React.memo(function MatchInnerImpl({
 }): any {
   const router = useRouter()
 
-  const { match, key, routeId } = useRouterState({
-    select: (s) => {
-      const match = s.matches.find((d) => d.id === matchId)!
-      const routeId = match.routeId as string
-
-      const remountFn =
-        (router.routesById[routeId] as AnyRoute).options.remountDeps ??
-        router.options.defaultRemountDeps
-      const remountDeps = remountFn?.({
-        routeId,
-        loaderDeps: match.loaderDeps,
-        params: match._strictParams,
-        search: match._strictSearch,
-      })
-      const key = remountDeps ? JSON.stringify(remountDeps) : undefined
-
-      return {
-        key,
-        routeId,
-        match: {
-          id: match.id,
-          status: match.status,
-          error: match.error,
-          _forcePending: match._forcePending,
-          _displayPending: match._displayPending,
-        },
+  if (isServer ?? router.isServer) {
+    const match = router.stores.activeMatchStoresById.get(matchId)?.state
+    if (!match) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find match for matchId "${matchId}". Please file an issue!`,
+        )
       }
-    },
-    structuralSharing: true as any,
-  })
 
-  const route = router.routesById[routeId] as AnyRoute
+      invariant()
+    }
+
+    const routeId = match.routeId as string
+    const route = router.routesById[routeId] as AnyRoute
+    const remountFn =
+      (router.routesById[routeId] as AnyRoute).options.remountDeps ??
+      router.options.defaultRemountDeps
+    const remountDeps = remountFn?.({
+      routeId,
+      loaderDeps: match.loaderDeps,
+      params: match._strictParams,
+      search: match._strictSearch,
+    })
+    const key = remountDeps ? JSON.stringify(remountDeps) : undefined
+    const Comp = route.options.component ?? router.options.defaultComponent
+    const out = Comp ? <Comp key={key} /> : <Outlet />
+
+    if (match._displayPending) {
+      throw router.getMatch(match.id)?._nonReactive.displayPendingPromise
+    }
+
+    if (match._forcePending) {
+      throw router.getMatch(match.id)?._nonReactive.minPendingPromise
+    }
+
+    if (match.status === 'pending') {
+      throw router.getMatch(match.id)?._nonReactive.loadPromise
+    }
+
+    if (match.status === 'notFound') {
+      if (!isNotFound(match.error)) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw new Error('Invariant failed: Expected a notFound error')
+        }
+
+        invariant()
+      }
+      return renderRouteNotFound(router, route, match.error)
+    }
+
+    if (match.status === 'redirected') {
+      if (!isRedirect(match.error)) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw new Error('Invariant failed: Expected a redirect error')
+        }
+
+        invariant()
+      }
+      throw router.getMatch(match.id)?._nonReactive.loadPromise
+    }
+
+    if (match.status === 'error') {
+      const RouteErrorComponent =
+        (route.options.errorComponent ??
+          router.options.defaultErrorComponent) ||
+        ErrorComponent
+      return (
+        <RouteErrorComponent
+          error={match.error as any}
+          reset={undefined as any}
+          info={{
+            componentStack: '',
+          }}
+        />
+      )
+    }
+
+    return out
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const matchStore = router.stores.activeMatchStoresById.get(matchId)
+  if (!matchStore) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `Invariant failed: Could not find match for matchId "${matchId}". Please file an issue!`,
+      )
+    }
 
+    invariant()
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const match = useStore(matchStore, (value) => value)
+  const routeId = match.routeId as string
+  const route = router.routesById[routeId] as AnyRoute
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const key = React.useMemo(() => {
+    const remountFn =
+      (router.routesById[routeId] as AnyRoute).options.remountDeps ??
+      router.options.defaultRemountDeps
+    const remountDeps = remountFn?.({
+      routeId,
+      loaderDeps: match.loaderDeps,
+      params: match._strictParams,
+      search: match._strictSearch,
+    })
+    return remountDeps ? JSON.stringify(remountDeps) : undefined
+  }, [
+    routeId,
+    match.loaderDeps,
+    match._strictParams,
+    match._strictSearch,
+    router.options.defaultRemountDeps,
+    router.routesById,
+  ])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const out = React.useMemo(() => {
     const Comp = route.options.component ?? router.options.defaultComponent
     if (Comp) {
@@ -256,14 +417,26 @@ export const MatchInner = React.memo(function MatchInnerImpl({
   }
 
   if (match.status === 'notFound') {
-    invariant(isNotFound(match.error), 'Expected a notFound error')
+    if (!isNotFound(match.error)) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error('Invariant failed: Expected a notFound error')
+      }
+
+      invariant()
+    }
     return renderRouteNotFound(router, route, match.error)
   }
 
   if (match.status === 'redirected') {
     // Redirects should be handled by the router transition. If we happen to
     // encounter a redirect here, it's a bug. Let's warn, but render nothing.
-    invariant(isRedirect(match.error), 'Expected a redirect error')
+    if (!isRedirect(match.error)) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error('Invariant failed: Expected a redirect error')
+      }
+
+      invariant()
+    }
 
     // warning(
     //   false,
@@ -309,37 +482,57 @@ export const MatchInner = React.memo(function MatchInnerImpl({
 export const Outlet = React.memo(function OutletImpl() {
   const router = useRouter()
   const matchId = React.useContext(matchContext)
-  const routeId = useRouterState({
-    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,
-  })
-
-  const route = router.routesById[routeId]!
-
-  const parentGlobalNotFound = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const parentMatch = matches.find((d) => d.id === matchId)
-      invariant(
-        parentMatch,
-        `Could not find parent match for matchId "${matchId}"`,
-      )
-      return parentMatch.globalNotFound
-    },
-  })
-
-  const childMatchId = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const index = matches.findIndex((d) => d.id === matchId)
-      return matches[index + 1]?.id
-    },
-  })
+
+  let routeId: string | undefined
+  let parentGlobalNotFound = false
+  let childMatchId: string | undefined
+
+  if (isServer ?? router.isServer) {
+    const matches = router.stores.activeMatchesSnapshot.state
+    const parentIndex = matchId
+      ? matches.findIndex((match) => match.id === matchId)
+      : -1
+    const parentMatch = parentIndex >= 0 ? matches[parentIndex] : undefined
+    routeId = parentMatch?.routeId as string | undefined
+    parentGlobalNotFound = parentMatch?.globalNotFound ?? false
+    childMatchId =
+      parentIndex >= 0 ? (matches[parentIndex + 1]?.id as string) : undefined
+  } else {
+    // Subscribe directly to the match store from the pool instead of
+    // the two-level byId → matchStore pattern.
+    const parentMatchStore = matchId
+      ? router.stores.activeMatchStoresById.get(matchId)
+      : undefined
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ;[routeId, parentGlobalNotFound] = useStore(parentMatchStore, (match) => [
+      match?.routeId as string | undefined,
+      match?.globalNotFound ?? false,
+    ])
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    childMatchId = useStore(router.stores.matchesId, (ids) => {
+      const index = ids.findIndex((id) => id === matchId)
+      return ids[index + 1]
+    })
+  }
+
+  const route = routeId ? router.routesById[routeId] : undefined
 
   const pendingElement = router.options.defaultPendingComponent ? (
     <router.options.defaultPendingComponent />
   ) : null
 
   if (parentGlobalNotFound) {
+    if (!route) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          'Invariant failed: Could not resolve route for Outlet render',
+        )
+      }
+
+      invariant()
+    }
     return renderRouteNotFound(router, route, undefined)
   }
 

package/src/Matches.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
-import warning from 'tiny-warning'
-import { rootRouteId } from '@tanstack/router-core'
+import { useStore } from '@tanstack/react-store'
+import { replaceEqualDeep, rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import { Transitioner } from './Transitioner'
 import { matchContext } from './matchContext'
@@ -28,7 +27,6 @@ import type {
   ResolveRelativePath,
   ResolveRoute,
   RouteByPath,
-  RouterState,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
@@ -78,15 +76,15 @@ export function Matches() {
 
 function MatchesInner() {
   const router = useRouter()
-  const matchId = useRouterState({
-    select: (s) => {
-      return s.matches[0]?.id
-    },
-  })
-
-  const resetKey = useRouterState({
-    select: (s) => s.loadedAt,
-  })
+  const _isServer = isServer ?? router.isServer
+  const matchId = _isServer
+    ? router.stores.firstMatchId.state
+    : // eslint-disable-next-line react-hooks/rules-of-hooks
+      useStore(router.stores.firstMatchId, (id) => id)
+  const resetKey = _isServer
+    ? router.stores.loadedAt.state
+    : // eslint-disable-next-line react-hooks/rules-of-hooks
+      useStore(router.stores.loadedAt, (loadedAt) => loadedAt)
 
   const matchComponent = matchId ? <Match matchId={matchId} /> : null
 
@@ -101,11 +99,10 @@ function MatchesInner() {
           onCatch={
             process.env.NODE_ENV !== 'production'
               ? (error) => {
-                  warning(
-                    false,
-                    `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+                  console.warn(
+                    `Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
                   )
-                  warning(false, error.message || error.toString())
+                  console.warn(`Warning: ${error.message || error.toString()}`)
                 }
               : undefined
           }
@@ -144,10 +141,10 @@ export type UseMatchRouteOptions<
 export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
   const router = useRouter()
 
-  useRouterState({
-    select: (s) => [s.location.href, s.resolvedLocation?.href, s.status],
-    structuralSharing: true as any,
-  })
+  if (!(isServer ?? router.isServer)) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useStore(router.stores.matchRouteReactivity, (d) => d)
+  }
 
   return React.useCallback(
     <
@@ -238,15 +235,36 @@ export function useMatches<
   opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
     StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
 ): UseMatchesResult<TRouter, TSelected> {
-  return useRouterState({
-    select: (state: RouterState<TRouter['routeTree']>) => {
-      const matches = state.matches
-      return opts?.select
-        ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
-        : matches
-    },
-    structuralSharing: opts?.structuralSharing,
-  } as any) as UseMatchesResult<TRouter, TSelected>
+  const router = useRouter<TRouter>()
+  const previousResult =
+    React.useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(
+      undefined,
+    )
+
+  if (isServer ?? router.isServer) {
+    const matches = router.stores.activeMatchesSnapshot.state as Array<
+      MakeRouteMatchUnion<TRouter>
+    >
+    return (opts?.select ? opts.select(matches) : matches) as UseMatchesResult<
+      TRouter,
+      TSelected
+    >
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useStore(router.stores.activeMatchesSnapshot, (matches) => {
+    const selected = opts?.select
+      ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
+      : (matches as any)
+
+    if (opts?.structuralSharing ?? router.options.defaultStructuralSharing) {
+      const shared = replaceEqualDeep(previousResult.current, selected)
+      previousResult.current = shared
+      return shared
+    }
+
+    return selected
+  }) as UseMatchesResult<TRouter, TSelected>
 }
 
 /**