Rename experimental vital hook #32343

huozhi · 2021-12-09T22:24:56Z

rename useExperimentalWebVitalsReport to unstable_useWebVitalsReport to align with other react hook APIs

ijjk

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

shuding · 2021-12-12T00:12:59Z

That's a good call by JJ, maybe we should stick with the current experimental name.

Another choice is import { useHook } from 'next/unstable_...'.

huozhi · 2021-12-12T01:04:34Z

@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 unstable_ prefix to API instead of file paths. I feel keep the import path unchanged might be good. Renaming the imported variables is also pretty easy and flexible.

import { unstable_useWebVitalsReport as useWebVitalsReport } from 'next/vitals'

like React.unstable_batchedUpdate and React.unstable_useCacheRefresh

shuding · 2021-12-12T01:53:14Z

@huozhi Linters don’t like unstable_useWebVitalsReport As a hook name in general. If you put it under a if condition, the linter won’t error while it should.

huozhi · 2021-12-12T10:39:24Z

So far react uses unstable_ for all experimental APIs including hooks. Feel it's quite a good practice to follow personally : )

Importing + renaming can easily solve the linter issue. the subpath imports like unstable_xx.js feel bit inform and unstable to maintain.
IMO the module file can be stable, but the APIs exported from there can be unstable

ijjk · 2021-12-12T10:45:28Z

Failing test suites

Commit: 6bbf570

test/integration/app-document-add-hmr/test/index.test.js

_app/_document add HMR > should HMR when _document is added

Expand output

● _app/_document add HMR › should HMR when _document is added

expect(received).toContain(expected) // indexOf

Expected substring: "index page"
Received string:    "<head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><meta name=\"next-head-count\" content=\"2\"><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1639305917424\"></script><script src=\"/_next/static/chunks/fallback/webpack.js?ts=1639305917424\" defer=\"\"></script><script src=\"/_next/static/chunks/fallback/main.js?ts=1639305917424\" defer=\"\"></script><script src=\"/_next/static/chunks/fallback/pages/_app.js?ts=1639305917424\" defer=\"\"></script><script src=\"/_next/static/chunks/fallback/pages/_error.js?ts=1639305917424\" defer=\"\"></script><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body style=\"overflow: hidden;\"><div id=\"__next\" data-reactroot=\"\"></div><script src=\"/_next/static/chunks/fallback/react-refresh.js?ts=1639305917424\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"ModuleBuildError\",\"message\":\"Module build failed (from ../../../packages/next/dist/build/webpack/loaders/next-swc-loader.js):\\nError: Failed to read source code from /home/runner/work/next.js/next.js/test/integration/app-document-add-hmr/pages/_app.js\\n\\nCaused by:\\n    No such file or directory (os error 2)\",\"stack\":\"ModuleBuildError: Module build failed (from ../../../packages/next/dist/build/webpack/loaders/next-swc-loader.js):\\nError: Failed to read source code from /home/runner/work/next.js/next.js/test/integration/app-document-add-hmr/pages/_app.js\\n\\nCaused by:\\n    No such file or directory (os error 2)\\n    at processResult (/home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:54452:19)\\n    at /home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:54554:5\\n    at /home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:140425:11\\n    at /home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:140221:20\\n    at context.callback (/home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:140150:13)\"},\"gip\":true,\"scriptLoader\":[]}</script><div id=\"__next-build-watcher\" style=\"position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;\"></div><next-route-announcer><p aria-live=\"assertive\" id=\"__next-route-announcer__\" role=\"alert\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;\"></p></next-route-announcer><nextjs-portal></nextjs-portal></body>"

  54 |       await fs.remove(appPage)
  55 |     }
> 56 |   })
     |     ^
  57 |
  58 |   it('should HMR when _document is added', async () => {
  59 |     let indexContent = await fs.readFile(indexPage)

  at Object.<anonymous> (integration/app-document-add-hmr/test/index.test.js:56:27)

test/integration/react-streaming-and-server-components/test/index.test.js

concurrentFeatures - dev > should support next/link

Expand output

● concurrentFeatures - dev › should support next/link

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: undefined

  259 |     )
  260 |     const dynamicRouteHTML2 = await renderViaHTTP(
> 261 |       context.appPort,
      |                       ^
  262 |       '/routes/dynamic2'
  263 |     )
  264 |

  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:261:56)

ijjk · 2021-12-12T10:57:44Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	huozhi/next.js rename-vital-hook	Change
buildDuration	23.3s	22.8s	-436ms
buildDurationCached	4.2s	4.2s	⚠️ +36ms
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.884	3.982	⚠️ +0.1
/ avg req/sec	643.65	627.81	⚠️ -15.84
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.021	2.091	⚠️ +0.07
/error-in-render avg req/sec	1237.31	1195.64	⚠️ -41.67

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	⚠️ +361ms
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	⚠️ +0.05
/error-in-render avg req/sec	1275.18	1242.89	⚠️ -32.29

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	⚠️ +1 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

Commit: 6bbf570

huozhi requested review from ijjk, shuding and timneutkens as code owners December 9, 2021 22:24

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Dec 9, 2021

Rename vital hook

0bd9ac7

huozhi force-pushed the rename-vital-hook branch from f19b719 to 0bd9ac7 Compare December 9, 2021 22:54

update taskfile

ccae88f

ijjk reviewed Dec 10, 2021

View reviewed changes