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
Rename experimental vital hook #32343
Conversation
f19b719
to
0bd9ac7
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems the react-hooks eslint plugin doesn't like the unstable_
prefix:
Error: 14:26 error React Hook "useRef" is called in function "unstable_useWebVitalsReport" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks
Error: 16:3 error React Hook "useEffect" is called in function "unstable_useWebVitalsReport" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
That's a good call by JJ, maybe we should stick with the current experimental name. Another choice is |
@shuding I think JJ just means the lint errors, I fixed it by re-exported only in entry file. I'd like to follow the react naming rules with giving import { unstable_useWebVitalsReport as useWebVitalsReport } from 'next/vitals' like |
@huozhi Linters don’t like |
So far react uses Importing + renaming can easily solve the linter issue. the subpath imports like |
Failing test suitesCommit: 6bbf570 test/integration/app-document-add-hmr/test/index.test.js
Expand output● _app/_document add HMR › should HMR when _document is added
test/integration/react-streaming-and-server-components/test/index.test.js
Expand output● concurrentFeatures - dev › should support next/link
|
Stats from current PRDefault Build (Decrease detected ✓)General Overall decrease ✓
Page Load Tests Overall decrease
|
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 3.884 | 3.982 | |
/ avg req/sec | 643.65 | 627.81 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 2.021 | 2.091 | |
/error-in-render avg req/sec | 1237.31 | 1195.64 |
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
450.HASH.js gzip | 179 B | 179 B | ✓ |
framework-HASH.js gzip | 42.2 kB | 42.2 kB | ✓ |
main-HASH.js gzip | 28.9 kB | 28.9 kB | -8 B |
webpack-HASH.js gzip | 1.45 kB | 1.45 kB | ✓ |
Overall change | 72.8 kB | 72.8 kB | -8 B |
Legacy Client Bundles (polyfills)
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.37 kB | 1.37 kB | ✓ |
_error-HASH.js gzip | 194 B | 194 B | ✓ |
amp-HASH.js gzip | 312 B | 312 B | ✓ |
css-HASH.js gzip | 326 B | 326 B | ✓ |
dynamic-HASH.js gzip | 2.39 kB | 2.39 kB | ✓ |
head-HASH.js gzip | 350 B | 350 B | ✓ |
hooks-HASH.js gzip | 919 B | 919 B | ✓ |
image-HASH.js gzip | 4.73 kB | 4.73 kB | ✓ |
index-HASH.js gzip | 263 B | 263 B | ✓ |
link-HASH.js gzip | 2.13 kB | 2.13 kB | ✓ |
routerDirect..HASH.js gzip | 321 B | 321 B | ✓ |
script-HASH.js gzip | 383 B | 383 B | ✓ |
withRouter-HASH.js gzip | 318 B | 318 B | ✓ |
85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
Overall change | 14.1 kB | 14.1 kB | ✓ |
Client Build Manifests
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
_buildManifest.js gzip | 459 B | 459 B | ✓ |
Overall change | 459 B | 459 B | ✓ |
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
index.html gzip | 532 B | 531 B | -1 B |
link.html gzip | 546 B | 545 B | -1 B |
withRouter.html gzip | 527 B | 526 B | -1 B |
Overall change | 1.6 kB | 1.6 kB | -3 B |
Diffs
Diff for main-HASH.js
@@ -3141,7 +3141,7 @@
value: true
});
exports.trackWebVitalMetric = trackWebVitalMetric;
- exports.useExperimentalWebVitalsReport = useExperimentalWebVitalsReport;
+ exports.useWebVitalsReport = useWebVitalsReport;
exports.webVitalsCallbacks = void 0;
var _react = __webpack_require__(7294);
var webVitalsCallbacks = new Set();
@@ -3153,7 +3153,7 @@
return callback(metric);
});
}
- function useExperimentalWebVitalsReport(callback) {
+ function useWebVitalsReport(callback) {
var metricIndexRef = (0, _react).useRef(0);
(0, _react).useEffect(
function() {
Diff for index.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bfbf831b5d325929.js"
+ src="/_next/static/chunks/main-78d45573d11f1cca.js"
defer=""
></script>
<script
Diff for link.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bfbf831b5d325929.js"
+ src="/_next/static/chunks/main-78d45573d11f1cca.js"
defer=""
></script>
<script
Diff for withRouter.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bfbf831b5d325929.js"
+ src="/_next/static/chunks/main-78d45573d11f1cca.js"
defer=""
></script>
<script
Default Build with SWC (Decrease detected ✓)
General Overall decrease ✓
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
buildDuration | 24.4s | 24.7s | |
buildDurationCached | 4.1s | 4.1s | -68ms |
nodeModulesSize | 351 MB | 351 MB | -69 B |
Page Load Tests Overall decrease ⚠️
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 3.904 | 3.865 | -0.04 |
/ avg req/sec | 640.35 | 646.75 | +6.4 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.961 | 2.011 | |
/error-in-render avg req/sec | 1275.18 | 1242.89 |
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
450.HASH.js gzip | 179 B | 179 B | ✓ |
framework-HASH.js gzip | 42.3 kB | 42.3 kB | ✓ |
main-HASH.js gzip | 29.1 kB | 29.1 kB | -9 B |
webpack-HASH.js gzip | 1.44 kB | 1.44 kB | ✓ |
Overall change | 73 kB | 73 kB | -9 B |
Legacy Client Bundles (polyfills)
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.35 kB | 1.35 kB | ✓ |
_error-HASH.js gzip | 180 B | 180 B | ✓ |
amp-HASH.js gzip | 305 B | 305 B | ✓ |
css-HASH.js gzip | 321 B | 321 B | ✓ |
dynamic-HASH.js gzip | 2.39 kB | 2.39 kB | ✓ |
head-HASH.js gzip | 342 B | 342 B | ✓ |
hooks-HASH.js gzip | 906 B | 906 B | ✓ |
image-HASH.js gzip | 4.75 kB | 4.75 kB | ✓ |
index-HASH.js gzip | 256 B | 256 B | ✓ |
link-HASH.js gzip | 2.19 kB | 2.19 kB | ✓ |
routerDirect..HASH.js gzip | 314 B | 314 B | ✓ |
script-HASH.js gzip | 375 B | 375 B | ✓ |
withRouter-HASH.js gzip | 309 B | 309 B | ✓ |
85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
Overall change | 14.1 kB | 14.1 kB | ✓ |
Client Build Manifests
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
_buildManifest.js gzip | 458 B | 458 B | ✓ |
Overall change | 458 B | 458 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | huozhi/next.js rename-vital-hook | Change | |
---|---|---|---|
index.html gzip | 533 B | 532 B | -1 B |
link.html gzip | 546 B | 546 B | ✓ |
withRouter.html gzip | 526 B | 527 B | |
Overall change | 1.6 kB | 1.6 kB | ✓ |
Diffs
Diff for main-HASH.js
@@ -3141,7 +3141,7 @@
value: true
});
exports.trackWebVitalMetric = trackWebVitalMetric;
- exports.useExperimentalWebVitalsReport = useExperimentalWebVitalsReport;
+ exports.useWebVitalsReport = useWebVitalsReport;
exports.webVitalsCallbacks = void 0;
var _react = __webpack_require__(7294);
var webVitalsCallbacks = new Set();
@@ -3153,7 +3153,7 @@
return callback(metric);
});
}
- function useExperimentalWebVitalsReport(callback) {
+ function useWebVitalsReport(callback) {
var metricIndexRef = (0, _react).useRef(0);
(0, _react).useEffect(
function() {
Diff for index.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bfbf831b5d325929.js"
+ src="/_next/static/chunks/main-78d45573d11f1cca.js"
defer=""
></script>
<script
Diff for link.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bfbf831b5d325929.js"
+ src="/_next/static/chunks/main-78d45573d11f1cca.js"
defer=""
></script>
<script
Diff for withRouter.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bfbf831b5d325929.js"
+ src="/_next/static/chunks/main-78d45573d11f1cca.js"
defer=""
></script>
<script
rename
useExperimentalWebVitalsReport
tounstable_useWebVitalsReport
to align with other react hook APIs