vercel
FIX [#58788]: Fixed useParams hook undesired re-renders and updated it to use PathParamsContext in the app router.
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
Hi everyone, I noticed this PR has been pending for a while, is there any chance to review it? grateful!
Hi everyone, I noticed this PR has been pending for a while, is there any chance to review it? grateful!
We are also experiencing this issue and we have A LOT of components that gets rerendered. Any update at all on this PR?
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
Failing test suites
Commit: 4978c452389b852225fdf5e695d1f0e78f0c2304
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.
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...?
