Fixed useParams hook undesired re-renders and updated it to use PathParamsContext in the app router.

[florian-lp]

Moved app-dir path params parsing logic from useParams to AppRouter. This allows for the use of PathParamsContext in the useParams hook for both pages and app routers. In addition, this allows for memoization of the layout tree which fixes undesired re-renders of the useParams hook.

Fixes #58788
Closes NEXT-2434

[kmvan]

Hi everyone, I noticed this PR has been pending for a while, is there any chance to review it? grateful!

[kissshout]

Hi everyone, I noticed this PR has been pending for a while, is there any chance to review it? grateful!

[Khongchai]

We are also experiencing this issue and we have A LOT of components that gets rerendered. Any update at all on this PR?

[atinseau]

someone for merging this pr ahah ?

[jarindr]

bump

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
buildDuration	19.8s	19.8s	N/A
buildDurationCached	7.8s	7.2s	N/A
nodeModulesSize	196 MB	196 MB	N/A
nextStartRea..uration (ms)	432ms	432ms	✓

Client Bundles (main, webpack)

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
1068-HASH.js gzip	30 kB	30 kB	N/A
3f784ff6-HASH.js gzip	53.5 kB	53.5 kB	N/A
4944-HASH.js gzip	4.96 kB	4.96 kB	N/A
8423.HASH.js gzip	181 B	181 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	242 B	N/A
main-HASH.js gzip	32 kB	32 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	47.1 kB	47.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
_app-HASH.js gzip	196 B	196 B	✓
_error-HASH.js gzip	184 B	183 B	N/A
amp-HASH.js gzip	503 B	504 B	N/A
css-HASH.js gzip	323 B	324 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	258 B	259 B	N/A
head-HASH.js gzip	353 B	351 B	N/A
hooks-HASH.js gzip	370 B	370 B	✓
image-HASH.js gzip	4.21 kB	4.2 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.68 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	313 B	314 B	N/A
script-HASH.js gzip	386 B	385 B	N/A
withRouter-HASH.js gzip	309 B	311 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	931 B	931 B	✓

Client Build Manifests

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
_buildManifest.js gzip	485 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
index.html gzip	529 B	527 B	N/A
link.html gzip	541 B	540 B	N/A
withRouter.html gzip	525 B	522 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
edge-ssr.js gzip	94.4 kB	94.4 kB	N/A
page.js gzip	151 kB	151 kB	⚠️ +127 B
Overall change	151 kB	151 kB	⚠️ +127 B

Middleware size

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
middleware-b..fest.js gzip	624 B	627 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	44.4 kB	44.4 kB	N/A
edge-runtime..pack.js gzip	1.94 kB	1.94 kB	✓
Overall change	2.1 kB	2.1 kB	✓

Next Runtimes

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
app-page-exp...dev.js gzip	166 kB	166 kB	✓
app-page-exp..prod.js gzip	95.5 kB	95.5 kB	✓
app-page-tur..prod.js gzip	97.2 kB	97.2 kB	✓
app-page-tur..prod.js gzip	91.7 kB	91.7 kB	✓
app-page.run...dev.js gzip	136 kB	136 kB	✓
app-page.run..prod.js gzip	90.2 kB	90.2 kB	✓
app-route-ex...dev.js gzip	22 kB	22 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.6 kB	14.6 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.6 kB	14.6 kB	✓
pages-api-tu..prod.js gzip	9.43 kB	9.43 kB	✓
pages-api.ru...dev.js gzip	9.7 kB	9.7 kB	✓
pages-api.ru..prod.js gzip	9.43 kB	9.43 kB	✓
pages-turbo...prod.js gzip	22 kB	22 kB	✓
pages.runtim...dev.js gzip	22.7 kB	22.7 kB	✓
pages.runtim..prod.js gzip	22 kB	22 kB	✓
server.runti..prod.js gzip	50 kB	50 kB	✓
Overall change	925 kB	925 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	florian-lp/next.js useparams-prefetch-fix	Change
0.pack gzip	1.55 MB	1.55 MB	⚠️ +242 B
index.pack gzip	104 kB	104 kB	⚠️ +147 B
Overall change	1.65 MB	1.65 MB	⚠️ +389 B

Diff details

Diff for page.js

Diff too large to display

Diff for 1068-HASH.js

Diff too large to display

Commit: 7a6362f

[ijjk]

Failing test suites

Commit: 4978c45

pnpm test-dev test/e2e/app-dir/interception-route-prefetch-cache/interception-route-prefetch-cache.test.ts (PPR)

• interception-route-prefetch-cache > runtime = edge > should render the correct interception when two distinct layouts share the same path structure

Expand output

● interception-route-prefetch-cache › runtime = edge › should render the correct interception when two distinct layouts share the same path structure

TIMED OUT: /Intercepted on Foo Page/



TimeoutError: page.waitForSelector: Timeout 60000ms exceeded.
=========================== logs ===========================
waiting for locator('#slot')
============================================================

  636 |
  637 |   if (hardError) {
> 638 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  639 |   }
  640 |   return false
  641 | }

  at check (lib/next-test-utils.ts:638:11)
  at Object.<anonymous> (e2e/app-dir/interception-route-prefetch-cache/interception-route-prefetch-cache.test.ts:21:7)

Read more about building and testing Next.js in contributing.md.

[ztanner]

Thanks for the PR!

[bilalchalhoub]

it's totally breaking our app since few months now. This should be a breaking change. We are experiencing a lot of issues lately with next :/ When do you guys plan to release a stable version...?