Fix `<RouteAnnouncer/>` shouldn't announce initial path under strict mode and React 18 #34338

shuding · 2022-02-14T18:29:40Z

As the comment mentioned, React 18 with Strict Mode enabled might cause double invocation of lifecycle methods. This makes the <RouteAnnouncer/> being non-empty for the initial page, which is a bug (it should only announce page change whenever a navigation happens).

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

ijjk · 2022-02-14T19:02:48Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/bc95	Change
buildDuration	15.3s	15s	-330ms
buildDurationCached	6.1s	5.9s	-133ms
nodeModulesSize	359 MB	359 MB	⚠️ +50 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	shuding/next.js shu/bc95	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.032	3.031	0
/ avg req/sec	824.56	824.73	+0.17
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.201	1.178	-0.02
/error-in-render avg req/sec	2082.39	2122.3	+39.91

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	shuding/next.js shu/bc95	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	-2 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.5 kB	71.5 kB	-2 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js shu/bc95	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js shu/bc95	Change
_app-HASH.js gzip	1.36 kB	1.36 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.57 kB	2.57 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	5.01 kB	5.01 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 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.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js shu/bc95	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	shuding/next.js shu/bc95	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	527 B	526 B	-1 B
Overall change	1.6 kB	1.6 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -2003,7 +2003,7 @@
           setRouteAnnouncement = ref1[1];
         // Only announce the path change, but not for the first load because screen
         // reader will do that automatically.
-        var initialPathLoaded = _react.default.useRef(false);
+        var previouslyLoadedPath = _react.default.useRef(asPath);
         // Every time the path changes, announce the new page’s title following this
         // priority: first the document title (from head), otherwise the first h1, or
         // if none of these exist, then the pathname from the URL. This methodology is
@@ -2012,10 +2012,9 @@
         // https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/
         _react.default.useEffect(
           function() {
-            if (!initialPathLoaded.current) {
-              initialPathLoaded.current = true;
-              return;
-            }
+            // If the path hasn't change, we do nothing.
+            if (previouslyLoadedPath.current === asPath) return;
+            previouslyLoadedPath.current = asPath;
             if (document.title) {
               setRouteAnnouncement(document.title);
             } else {

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6e7dafb6fd9caf74.js"
+      src="/_next/static/chunks/main-345f88b9a5a55ff1.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6e7dafb6fd9caf74.js"
+      src="/_next/static/chunks/main-345f88b9a5a55ff1.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6e7dafb6fd9caf74.js"
+      src="/_next/static/chunks/main-345f88b9a5a55ff1.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/bc95	Change
buildDuration	18.4s	18.7s	⚠️ +362ms
buildDurationCached	6s	6s	⚠️ +34ms
nodeModulesSize	359 MB	359 MB	⚠️ +50 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js shu/bc95	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.02	2.99	-0.03
/ avg req/sec	827.83	836.08	+8.25
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.149	1.193	⚠️ +0.04
/error-in-render avg req/sec	2175.57	2094.87	⚠️ -80.7

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	shuding/next.js shu/bc95	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.1 kB	42.1 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	-3 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.7 kB	71.6 kB	-3 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js shu/bc95	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js shu/bc95	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.56 kB	2.56 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	5.05 kB	5.05 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.28 kB	2.28 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.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js shu/bc95	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/bc95	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	526 B	527 B	⚠️ +1 B
Overall change	1.6 kB	1.61 kB	⚠️ +1 B

Diffs

Diff for main-HASH.js

@@ -2003,7 +2003,7 @@
           setRouteAnnouncement = ref1[1];
         // Only announce the path change, but not for the first load because screen
         // reader will do that automatically.
-        var initialPathLoaded = _react.default.useRef(false);
+        var previouslyLoadedPath = _react.default.useRef(asPath);
         // Every time the path changes, announce the new page’s title following this
         // priority: first the document title (from head), otherwise the first h1, or
         // if none of these exist, then the pathname from the URL. This methodology is
@@ -2012,10 +2012,9 @@
         // https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/
         _react.default.useEffect(
           function() {
-            if (!initialPathLoaded.current) {
-              initialPathLoaded.current = true;
-              return;
-            }
+            // If the path hasn't change, we do nothing.
+            if (previouslyLoadedPath.current === asPath) return;
+            previouslyLoadedPath.current = asPath;
             if (document.title) {
               setRouteAnnouncement(document.title);
             } else {

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6e7dafb6fd9caf74.js"
+      src="/_next/static/chunks/main-345f88b9a5a55ff1.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6e7dafb6fd9caf74.js"
+      src="/_next/static/chunks/main-345f88b9a5a55ff1.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6e7dafb6fd9caf74.js"
+      src="/_next/static/chunks/main-345f88b9a5a55ff1.js"
       defer=""
     ></script>
     <script

Commit: 97c6019

shuding added 2 commits February 14, 2022 18:45

fix route announcer in strict mode

9198c29

add test

2a631b5

shuding requested review from timneutkens, ijjk and huozhi as code owners February 14, 2022 18:29

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Feb 14, 2022

ijjk approved these changes Feb 14, 2022

View reviewed changes

Merge branch 'canary' into shu/bc95

97c6019

shuding mentioned this pull request Feb 14, 2022

Fix flight root failed to hydrate in strict mode #34333

Merged

10 tasks

kodiakhq bot merged commit 468833e into vercel:canary Feb 14, 2022

shuding deleted the shu/bc95 branch February 14, 2022 20:05

github-actions bot locked as resolved and limited conversation to collaborators Mar 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `<RouteAnnouncer/>` shouldn't announce initial path under strict mode and React 18 #34338

Fix `<RouteAnnouncer/>` shouldn't announce initial path under strict mode and React 18 #34338

shuding commented Feb 14, 2022

ijjk commented Feb 14, 2022

Diffs

Diffs

Fix <RouteAnnouncer/> shouldn't announce initial path under strict mode and React 18 #34338

Fix <RouteAnnouncer/> shouldn't announce initial path under strict mode and React 18 #34338

Conversation

shuding commented Feb 14, 2022

Bug

Feature

Documentation / Examples

ijjk commented Feb 14, 2022

Stats from current PR

Diffs

Diffs

Fix `<RouteAnnouncer/>` shouldn't announce initial path under strict mode and React 18 #34338

Fix `<RouteAnnouncer/>` shouldn't announce initial path under strict mode and React 18 #34338