refactor: signal based reactivity (#6704)

Author: Sheraff

.changeset/five-towns-wave.md

@@ -0,0 +1,18 @@
+---
+'@tanstack/router-ssr-query-core': minor
+'@tanstack/router-devtools-core': minor
+'@tanstack/start-client-core': minor
+'@tanstack/start-server-core': minor
+'@tanstack/router-plugin': minor
+'@tanstack/react-router': minor
+'@tanstack/solid-router': minor
+'@tanstack/react-start': minor
+'@tanstack/router-core': minor
+'@tanstack/solid-start': minor
+'@tanstack/vue-router': minor
+'@tanstack/vue-start': minor
+---
+
+remove pendingMatches, cachedMatches
+move to signal-based reactivity
+solid uses its own native signals

docs/router/api/router/RouterStateType.md

@@ -11,7 +11,6 @@ type RouterState = {
   isLoading: boolean
   isTransitioning: boolean
   matches: Array<RouteMatch>
-  pendingMatches: Array<RouteMatch>
   location: ParsedLocation
   resolvedLocation: ParsedLocation
 }
@@ -41,11 +40,6 @@ The `RouterState` type contains all of the properties that are available on the
 - Type: [`Array<RouteMatch>`](./RouteMatchType.md)
 - An array of all of the route matches that have been resolved and are currently active.
 
-### `pendingMatches` property
-
-- Type: [`Array<RouteMatch>`](./RouteMatchType.md)
-- An array of all of the route matches that are currently pending.
-
 ### `location` property
 
 - Type: [`ParsedLocation`](./ParsedLocationType.md)

docs/router/api/router/useChildMatchesHook.md

@@ -6,7 +6,7 @@ title: useChildMatches hook
 The `useChildMatches` hook returns all of the child [`RouteMatch`](./RouteMatchType.md) objects from the closest match down to the leaf-most match. **It does not include the current match, which can be obtained using the `useMatch` hook.**
 
 > [!IMPORTANT]
-> If the router has pending matches and they are showing their pending component fallbacks, `router.state.pendingMatches` will used instead of `router.state.matches`.
+> If the router has pending matches and they are showing their pending component fallbacks, pending matches are used instead of active matches.
 
 ## useChildMatches options
 

docs/router/api/router/useParentMatchesHook.md

@@ -6,7 +6,7 @@ title: useParentMatches hook
 The `useParentMatches` hook returns all of the parent [`RouteMatch`](./RouteMatchType.md) objects from the root down to the immediate parent of the current match in context. **It does not include the current match, which can be obtained using the `useMatch` hook.**
 
 > [!IMPORTANT]
-> If the router has pending matches and they are showing their pending component fallbacks, `router.state.pendingMatches` will used instead of `router.state.matches`.
+> If the router has pending matches and they are showing their pending component fallbacks, pending matches are used instead of active matches.
 
 ## useParentMatches options
 

docs/router/api/router/useRouterStateHook.md

@@ -6,7 +6,7 @@ title: useRouterState hook
 The `useRouterState` method is a hook that returns the current internal state of the router. This hook is useful for accessing the current state of the router in a component.
 
 > [!TIP]
-> If you want to access the current location or the current matches, you should try out the [`useLocation`](./useLocationHook.md) and [`useMatches`](./useMatchesHook.md) hooks first. These hooks are designed to be more ergonomic and easier to use than accessing the router state directly.
+> If you want to access the current location or the current matches, you should try out the [`useLocation`](./useLocationHook.md) and [`useMatches`](./useMatchesHook.md) hooks first. These hooks are designed to be more performant, more ergonomic and easier to use than accessing the router state directly.
 
 ## useRouterState options
 

e2e/react-router/basic-file-based/tests/app.spec.ts

@@ -268,6 +268,8 @@ async function structuralSharingTest(page: Page, enabled: boolean) {
 
 test('structural sharing disabled', async ({ page }) => {
   await structuralSharingTest(page, false)
+  expect(await getRenderCount(page)).toBe(2)
+  await page.getByTestId('link').click()
   expect(await getRenderCount(page)).toBeGreaterThan(2)
 })
 

e2e/solid-start/basic/tests/transition.spec.ts

@@ -3,6 +3,16 @@ import { expect, test } from '@playwright/test'
 test('transitions/count/create-resource should keep old values visible during navigation', async ({
   page,
 }) => {
+  const burstClicks = async (count: number) => {
+    await page
+      .getByTestId('increase-button')
+      .evaluate((element, clickCount) => {
+        for (let index = 0; index < clickCount; index++) {
+          ;(element as HTMLAnchorElement).click()
+        }
+      }, count)
+  }
+
   await page.goto('/transition/count/create-resource')
 
   await expect(page.getByTestId('n-value')).toContainText('n: 1')
@@ -20,7 +30,7 @@ test('transitions/count/create-resource should keep old values visible during na
 
   // 1 click
 
-  page.getByTestId('increase-button').click()
+  await burstClicks(1)
 
   await expect(page.getByTestId('n-value')).toContainText('n: 1', {
     timeout: 2_000,
@@ -40,8 +50,7 @@ test('transitions/count/create-resource should keep old values visible during na
 
   // 2 clicks
 
-  page.getByTestId('increase-button').click()
-  page.getByTestId('increase-button').click()
+  await burstClicks(2)
 
   await expect(page.getByTestId('n-value')).toContainText('n: 2', {
     timeout: 2000,
@@ -61,9 +70,7 @@ test('transitions/count/create-resource should keep old values visible during na
 
   // 3 clicks
 
-  page.getByTestId('increase-button').click()
-  page.getByTestId('increase-button').click()
-  page.getByTestId('increase-button').click()
+  await burstClicks(3)
 
   await expect(page.getByTestId('n-value')).toContainText('n: 4', {
     timeout: 2000,

packages/react-router/skills/react-router/SKILL.md

@@ -165,7 +165,8 @@ function InvalidateButton() {
 
 ### `useRouterState()`
 
-Subscribe to router state changes:
+Subscribe to router state changes. Exposes the entire state and thus incurs
+a performance cost. For matches or location favor `useMatches` and `useLocation`.
 
 ```tsx
 import { useRouterState } from '@tanstack/react-router'