memoize useParams (#56771)

`useParams` is not referentially equal between renders which can lead to unexpected behavior when used as a dep. 
This memoizes the response from `useParams` similar to `useSearchParams`.

[slack x-ref](https://vercel.slack.com/archives/C04DUD7EB1B/p1697145987740229)

Author: ztanner

packages/next/src/client/components/navigation.ts

@@ -170,13 +170,15 @@ export function useParams<T extends Params = Params>(): T {
   const globalLayoutRouter = useContext(GlobalLayoutRouterContext)
   const pathParams = useContext(PathParamsContext)
 
-  // When it's under app router
-  if (globalLayoutRouter) {
-    return getSelectedParams(globalLayoutRouter.tree) as T
-  }
+  return useMemo(() => {
+    // When it's under app router
+    if (globalLayoutRouter?.tree) {
+      return getSelectedParams(globalLayoutRouter.tree) as T
+    }
 
-  // When it's under client side pages router
-  return pathParams as T
+    // When it's under client side pages router
+    return pathParams as T
+  }, [globalLayoutRouter?.tree, pathParams])
 }
 
 // TODO-APP: handle parallel routes

test/e2e/app-dir/navigation/app/search-params/[foo]/page.js

@@ -0,0 +1,30 @@
+'use client'
+import { useParams, useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { useEffect } from 'react'
+
+export default function Page() {
+  const params = useParams()
+  const router = useRouter()
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    console.log('params changed')
+  }, [params])
+  return (
+    <div>
+      <button
+        id="rerender-button"
+        onClick={() => setCount((count) => count + 1)}
+      >
+        Re-Render {count}
+      </button>
+
+      <button
+        id="change-params-button"
+        onClick={() => router.push('/search-params/bar')}
+      >
+        Change Params
+      </button>
+    </div>
+  )
+}

test/e2e/app-dir/navigation/navigation.test.ts

@@ -54,6 +54,54 @@ createNextDescribe(
             : JSON.stringify(requests)
         }, 'success')
       })
+
+      describe('useParams identity between renders', () => {
+        async function runTests(page: string) {
+          const browser = await next.browser(page)
+
+          await check(
+            async () => JSON.stringify(await browser.log()),
+            /params changed/
+          )
+
+          let outputIndex = (await browser.log()).length
+
+          await browser.elementById('rerender-button').click()
+          await browser.elementById('rerender-button').click()
+          await browser.elementById('rerender-button').click()
+
+          await check(async () => {
+            return browser.elementById('rerender-button').text()
+          }, 'Re-Render 3')
+
+          await check(async () => {
+            const logs = await browser.log()
+            return JSON.stringify(logs.slice(outputIndex)).includes(
+              'params changed'
+            )
+              ? 'fail'
+              : 'success'
+          }, 'success')
+
+          outputIndex = (await browser.log()).length
+
+          await browser.elementById('change-params-button').click()
+
+          await check(
+            async () =>
+              JSON.stringify((await browser.log()).slice(outputIndex)),
+            /params changed/
+          )
+        }
+
+        it('should be stable in app', async () => {
+          await runTests('/search-params/foo')
+        })
+
+        it('should be stable in pages', async () => {
+          await runTests('/search-params-pages/foo')
+        })
+      })
     })
 
     describe('hash', () => {

test/e2e/app-dir/navigation/pages/search-params-pages/[foo]/index.js

@@ -0,0 +1,29 @@
+import { useParams, useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { useEffect } from 'react'
+
+export default function Page() {
+  const params = useParams()
+  const router = useRouter()
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    console.log('params changed')
+  }, [params])
+  return (
+    <div>
+      <button
+        id="rerender-button"
+        onClick={() => setCount((count) => count + 1)}
+      >
+        Re-Render {count}
+      </button>
+
+      <button
+        id="change-params-button"
+        onClick={() => router.push('/search-params-pages/bar')}
+      >
+        Change Params
+      </button>
+    </div>
+  )
+}