fix(react-router, solid-router) - useParams should only be concerned about the relevant params - Alpha

e2e/react-router/basic-file-based/src/components/RenderCounter.tsx

@@ -0,0 +1,7 @@
+import { useRef } from 'react'
+
+export const RenderCounter = () => {
+  const renderCounter = useRef(0)
+  renderCounter.current = renderCounter.current + 1
+  return <>{renderCounter.current}</>
+}

e2e/react-router/basic-file-based/src/routes/params-ps/named/$foo/$bar.$baz.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/params-ps/named/$foo/$bar/$baz')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { foo, bar, baz } = Route.useParams()
+  return (
+    <div>
+      Hello "/params-ps/named/{foo}/{bar}/{baz}"!
+      <div>
+        baz: <span data-testid="foo-bar-baz-value">{baz}</span>
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/params-ps/named/$foo/$bar.route.tsx

@@ -0,0 +1,45 @@
+import {
+  Link,
+  Outlet,
+  createFileRoute,
+  useParams,
+} from '@tanstack/react-router'
+import { RenderCounter } from '../../../../components/RenderCounter'
+
+export const Route = createFileRoute('/params-ps/named/$foo/$bar')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { foo, bar, baz } = useParams({
+    strict: false,
+  })
+
+  return (
+    <div>
+      Hello "/params-ps/named/{foo}/{bar}"!
+      <div>
+        Bar Render Count:{' '}
+        <span data-testid="foo-bar-render-count">
+          <RenderCounter />
+        </span>
+      </div>
+      <div>
+        Bar: <span data-testid="foo-bar-value">{bar}</span>
+      </div>
+      <div>
+        Baz in Bar:{' '}
+        <span data-testid="foo-baz-in-bar-value">{baz ?? 'no param'}</span>
+      </div>
+      <Link
+        data-testid="params-foo-bar-links-baz"
+        from={Route.fullPath}
+        to="./$baz"
+        params={{ baz: `${bar}_10` }}
+      >
+        To Baz
+      </Link>
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/params-ps/named/$foo/route.tsx

@@ -0,0 +1,42 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+import { RenderCounter } from '../../../../components/RenderCounter'
+
+export const Route = createFileRoute('/params-ps/named/$foo')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const foo = Route.useParams()
+  return (
+    <div>
+      <h3>ParamsNamedFoo</h3>
+      <div>
+        RenderCount:{' '}
+        <span data-testid="foo-render-count">
+          <RenderCounter />
+        </span>
+      </div>
+      <div data-testid="params-output">{JSON.stringify(foo)}</div>
+      <Link from={Route.fullPath} to="." data-testid="params-foo-links-index">
+        Index
+      </Link>
+      <Link
+        from={Route.fullPath}
+        to="./$bar"
+        params={{ bar: '1' }}
+        data-testid="params-foo-links-bar1"
+      >
+        Bar1
+      </Link>
+      <Link
+        from={Route.fullPath}
+        to="./$bar"
+        params={{ bar: '2' }}
+        data-testid="params-foo-links-bar2"
+      >
+        Bar2
+      </Link>
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/params-ps/named/index.tsx

@@ -1,5 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { redirect } from '@tanstack/react-router'
+import { createFileRoute, redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/params-ps/named/')({
   beforeLoad: () => {

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

@@ -129,6 +129,80 @@ test.describe('params operations + prefix/suffix', () => {
         expect(paramsObj).toEqual(params)
       })
     })
+
+    test(`ensure use params doesn't cause excess renders and is stable across various usage options`, async ({
+      page,
+    }) => {
+      await page.goto('/params-ps/named/foo')
+      await page.waitForLoadState('networkidle')
+
+      const pagePathname = new URL(page.url()).pathname
+      expect(pagePathname).toBe('/params-ps/named/foo')
+
+      const fooRenderCount = page.getByTestId('foo-render-count')
+      const fooIndexLink = page.getByTestId('params-foo-links-index')
+      const fooBar1Link = page.getByTestId('params-foo-links-bar1')
+      const fooBar2Link = page.getByTestId('params-foo-links-bar2')
+      const fooBarBazLink = page.getByTestId('params-foo-bar-links-baz')
+      const fooValue = page.getByTestId('params-output')
+      const fooBarValue = page.getByTestId('foo-bar-value')
+      const fooBazInBarValue = page.getByTestId('foo-baz-in-bar-value')
+      const fooBarRenderCount = page.getByTestId('foo-bar-render-count')
+      const fooBarBazValue = page.getByTestId('foo-bar-baz-value')
+
+      await expect(fooRenderCount).toBeInViewport()
+      await expect(fooValue).toBeInViewport()
+      await expect(fooIndexLink).toBeInViewport()
+      await expect(fooBar1Link).toBeInViewport()
+      await expect(fooBar2Link).toBeInViewport()
+      await expect(fooRenderCount).toHaveText('1')
+      await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
+
+      await fooBar1Link.click()
+      await page.waitForLoadState('networkidle')
+      await expect(fooValue).toBeInViewport()
+      await expect(fooRenderCount).toBeInViewport()
+      await expect(fooBarRenderCount).toBeInViewport()
+      await expect(fooBarValue).toBeInViewport()
+      await expect(fooBazInBarValue).toBeInViewport()
+      await expect(fooBarBazLink).toBeInViewport()
+      await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
+      await expect(fooRenderCount).toHaveText('1')
+      await expect(fooBarRenderCount).toHaveText('1')
+      await expect(fooBarValue).toHaveText('1')
+      await expect(fooBazInBarValue).toHaveText('no param')
+
+      await fooBarBazLink.click()
+      await page.waitForLoadState('networkidle')
+      await expect(fooValue).toBeInViewport()
+      await expect(fooRenderCount).toBeInViewport()
+      await expect(fooBarRenderCount).toBeInViewport()
+      await expect(fooBarValue).toBeInViewport()
+      await expect(fooBazInBarValue).toBeInViewport()
+      await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
+      await expect(fooRenderCount).toHaveText('1')
+      await expect(fooBarRenderCount).toHaveText('2')
+      await expect(fooBarValue).toHaveText('1')
+      await expect(fooBazInBarValue).toHaveText('1_10')
+      await expect(fooBarBazValue).toHaveText('1_10')
+
+      await fooBar2Link.click()
+      await page.waitForLoadState('networkidle')
+      await expect(fooValue).toBeInViewport()
+      await expect(fooRenderCount).toBeInViewport()
+      await expect(fooBarValue).toBeInViewport()
+      await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
+      await expect(fooRenderCount).toHaveText('1')
+      await expect(fooBarValue).toHaveText('2')
+
+      await fooIndexLink.click()
+      await page.waitForLoadState('networkidle')
+      await expect(fooValue).toBeInViewport()
+      await expect(fooRenderCount).toBeInViewport()
+      await expect(fooBarValue).not.toBeInViewport()
+      await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
+      await expect(fooRenderCount).toHaveText('1')
+    })
   })
 
   test.describe('wildcard param', () => {

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

@@ -53,6 +53,7 @@ test.describe('redirects', () => {
           setTimeout(resolve, expectRequestHappened ? 5000 : 500),
         )
         await Promise.race([requestPromise, timeoutPromise])
+        await page.waitForLoadState('networkidle')
         expect(requestHappened).toBe(expectRequestHappened)
         await link.click()
         let fullPageLoad = false