Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

memoize layout router context #64575

Merged
merged 1 commit into from
Apr 16, 2024
Merged

Conversation

ztanner
Copy link
Member

@ztanner ztanner commented Apr 16, 2024

Since AppRouterState is promise-based (so we can use the values and suspend in render), the state itself isn't stable between renders. Each action corresponds with a new Promise object. When a link is hovered, a prefetch action is dispatched, even if the prefetch never happens (for example, if there's already a prefetch entry in the cache, and it doesn't need to prefetch again). In other words, the prefetch action will be dispatched but won't necessarily change the state.

This means that these no-op actions that don't actually change the state values will trigger a re-render. Most of the context providers in AppRouter are memoized with the exception of LayoutRouter context. This PR memoizes those values so that consumers are only notified of meaningful updates.

Fixes #63159

Closes NEXT-3127

Copy link
Member Author

ztanner commented Apr 16, 2024

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ztanner and the rest of your teammates on Graphite Graphite

Copy link
Contributor

github-actions bot commented Apr 16, 2024

All broken links are now fixed, thank you!

@ijjk
Copy link
Member

ijjk commented Apr 16, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented Apr 16, 2024

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
buildDuration 17.1s 17.3s ⚠️ +219ms
buildDurationCached 9.4s 8s N/A
nodeModulesSize 199 MB 199 MB ⚠️ +1.37 kB
nextStartRea..uration (ms) 437ms 455ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
2453-HASH.js gzip 31.4 kB 31.4 kB N/A
3304.HASH.js gzip 181 B 181 B
3f784ff6-HASH.js gzip 53.7 kB 53.7 kB
8299-HASH.js gzip 5.1 kB 5.1 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 242 B 243 B N/A
main-HASH.js gzip 29.6 kB 29.7 kB N/A
webpack-HASH.js gzip 1.68 kB 1.68 kB N/A
Overall change 99 kB 99 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
_app-HASH.js gzip 196 B 197 B N/A
_error-HASH.js gzip 184 B 184 B
amp-HASH.js gzip 505 B 505 B
css-HASH.js gzip 324 B 325 B N/A
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 258 B 258 B
head-HASH.js gzip 352 B 352 B
hooks-HASH.js gzip 370 B 371 B N/A
image-HASH.js gzip 4.27 kB 4.27 kB
index-HASH.js gzip 259 B 259 B
link-HASH.js gzip 2.67 kB 2.67 kB N/A
routerDirect..HASH.js gzip 314 B 312 B N/A
script-HASH.js gzip 386 B 386 B
withRouter-HASH.js gzip 309 B 309 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 6.63 kB 6.63 kB
Client Build Manifests
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
_buildManifest.js gzip 483 B 485 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
index.html gzip 529 B 529 B
link.html gzip 542 B 542 B
withRouter.html gzip 525 B 523 B N/A
Overall change 1.07 kB 1.07 kB
Edge SSR bundle Size
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
edge-ssr.js gzip 94.4 kB 94.4 kB N/A
page.js gzip 3.05 kB 3.05 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
middleware-b..fest.js gzip 623 B 626 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 25.5 kB 25.5 kB N/A
edge-runtime..pack.js gzip 839 B 839 B
Overall change 839 B 839 B
Next Runtimes
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
app-page-exp...dev.js gzip 171 kB 171 kB
app-page-exp..prod.js gzip 97.5 kB 97.5 kB
app-page-tur..prod.js gzip 99.2 kB 99.2 kB
app-page-tur..prod.js gzip 93.5 kB 93.5 kB
app-page.run...dev.js gzip 145 kB 145 kB
app-page.run..prod.js gzip 92 kB 92 kB
app-route-ex...dev.js gzip 21.5 kB 21.5 kB
app-route-ex..prod.js gzip 15.2 kB 15.2 kB
app-route-tu..prod.js gzip 15.2 kB 15.2 kB
app-route-tu..prod.js gzip 14.9 kB 14.9 kB
app-route.ru...dev.js gzip 21.1 kB 21.1 kB
app-route.ru..prod.js gzip 14.9 kB 14.9 kB
pages-api-tu..prod.js gzip 9.55 kB 9.55 kB
pages-api.ru...dev.js gzip 9.82 kB 9.82 kB
pages-api.ru..prod.js gzip 9.55 kB 9.55 kB
pages-turbo...prod.js gzip 21.4 kB 21.4 kB
pages.runtim...dev.js gzip 22.1 kB 22.1 kB
pages.runtim..prod.js gzip 21.4 kB 21.4 kB
server.runti..prod.js gzip 51.5 kB 51.5 kB
Overall change 945 kB 945 kB
build cache
vercel/next.js canary vercel/next.js 04-16-memoize_layout_router_context Change
0.pack gzip 1.59 MB 1.59 MB N/A
index.pack gzip 107 kB 107 kB N/A
Overall change 0 B 0 B
Diff details
Diff for middleware.js

Diff too large to display

Diff for 2453-HASH.js

Diff too large to display

Commit: 30c18e6

@ztanner ztanner force-pushed the 04-16-memoize_layout_router_context branch from a6967ed to 30c18e6 Compare April 16, 2024 19:40
@ztanner ztanner marked this pull request as ready for review April 16, 2024 19:54
@ztanner ztanner merged commit e9aeb9e into canary Apr 16, 2024
80 checks passed
@ztanner ztanner deleted the 04-16-memoize_layout_router_context branch April 16, 2024 23:23
@github-actions github-actions bot added the locked label May 1, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Hovering a prefetch Link causes unnecessary re-render of the error boundary in production
2 participants