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

Remove mutable field from action types #59221

Merged

Conversation

acdlite
Copy link
Contributor

@acdlite acdlite commented Dec 4, 2023

Similar in spirit to #58938.

The app router reducer state used to be managed by useReducer, so it was written to be resilient to rebasing — the same action may be processed multiple times. Now that we've lifted the reducer outside of React (#56497), each action runs only a single time. So we can simplify some of the logic.

The purpose of the mutable field was so that if an action is processed multiple times, state could be reused between each run; for example, to prevent redundant network fetches. Now that this scenario can no longer happen, we can remove it.

I had to update some of the unit tests in navigate-reducer because they were written with the assumption that the reducer was called multiple times. As far as I can tell, most of this behavior is covered by e2e tests anyway, so I don't think it's too risky.

Closes NEXT-1782

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Dec 4, 2023
@ijjk
Copy link
Member

ijjk commented Dec 4, 2023

Failing test suites

Commit: 969bf26

pnpm test packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.test.tsx

  • serverPatchReducer > should apply server patch (concurrent)
Expand output

● serverPatchReducer › should apply server patch (concurrent)

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `serverPatchReducer should apply server patch (concurrent) 1`

- Snapshot  -  5
+ Received  + 27

@@ -14,10 +14,32 @@
                  "status": "READY",
                  "subTreeData": <React.Fragment>
                    Linking page
                  </React.Fragment>,
                },
+               "somewhere-else" => {
+                 "data": null,
+                 "parallelRoutes": Map {
+                   "children" => Map {
+                     "" => {
+                       "data": null,
+                       "head": <React.Fragment>
+                         <title>
+                           Somewhere page!
+                         </title>
+                       </React.Fragment>,
+                       "parallelRoutes": Map {},
+                       "status": "LAZYINITIALIZED",
+                       "subTreeData": null,
+                     },
+                   },
+                 },
+                 "status": "READY",
+                 "subTreeData": <h1>
+                   Somewhere Page!
+                 </h1>,
+               },
              },
            },
            "status": "READY",
            "subTreeData": <React.Fragment>
              Linking layout level
@@ -38,35 +60,35 @@
      "apply": false,
      "hashFragment": null,
      "onlyHashChange": false,
      "segmentPaths": [],
    },
-   "nextUrl": "/linking/about",
+   "nextUrl": "/linking/somewhere-else",
    "prefetchCache": Map {},
    "pushRef": {
      "mpaNavigation": false,
      "pendingPush": false,
-     "preserveCustomHistoryState": true,
+     "preserveCustomHistoryState": false,
    },
    "tree": [
      "",
      {
        "children": [
          "linking",
          {
            "children": [
-             "about",
+             "somewhere-else",
              {
                "children": [
                  "",
                  {},
                ],
              },
            ],
          },
        ],
      },
-     undefined,
-     undefined,
+     ,
+     ,
      true,
    ],
  }

  365 |     )
  366 |
> 367 |     expect(newState).toMatchInlineSnapshot(`
      |                      ^
  368 |       {
  369 |         "buildId": "development",
  370 |         "cache": {

  at Object.toMatchInlineSnapshot (../packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.test.tsx:367:22)

Read more about building and testing Next.js in contributing.md.

@ijjk
Copy link
Member

ijjk commented Dec 4, 2023

Tests Passed

@acdlite acdlite force-pushed the remove-mutable-field-from-action-types branch from 969bf26 to fd6d3f0 Compare December 4, 2023 00:24
@ijjk
Copy link
Member

ijjk commented Dec 4, 2023

Stats from current PR

Default Build
General
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
buildDuration 10.7s 10.6s N/A
buildDurationCached 5.8s 6.1s ⚠️ +281ms
nodeModulesSize 199 MB 199 MB N/A
nextStartRea..uration (ms) 425ms 421ms N/A
Client Bundles (main, webpack)
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
199-HASH.js gzip 30.7 kB 30.6 kB N/A
3f784ff6-HASH.js gzip 53.3 kB 53.3 kB
494.HASH.js gzip 180 B 181 B N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 241 B 239 B N/A
main-HASH.js gzip 31.7 kB 31.7 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB
Overall change 100 kB 100 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
_app-HASH.js gzip 194 B 195 B N/A
_error-HASH.js gzip 182 B 181 B N/A
amp-HASH.js gzip 501 B 503 B N/A
css-HASH.js gzip 322 B 323 B N/A
dynamic-HASH.js gzip 2.5 kB 2.5 kB
edge-ssr-HASH.js gzip 253 B 255 B N/A
head-HASH.js gzip 348 B 347 B N/A
hooks-HASH.js gzip 369 B 368 B N/A
image-HASH.js gzip 4.27 kB 4.27 kB N/A
index-HASH.js gzip 256 B 256 B
link-HASH.js gzip 2.61 kB 2.6 kB N/A
routerDirect..HASH.js gzip 311 B 311 B
script-HASH.js gzip 384 B 383 B N/A
withRouter-HASH.js gzip 307 B 308 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.17 kB 3.17 kB
Client Build Manifests
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
_buildManifest.js gzip 484 B 483 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
index.html gzip 527 B 527 B
link.html gzip 537 B 540 B N/A
withRouter.html gzip 522 B 522 B
Overall change 1.05 kB 1.05 kB
Edge SSR bundle Size
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
edge-ssr.js gzip 92.6 kB 92.7 kB N/A
page.js gzip 145 kB 145 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
middleware-b..fest.js gzip 625 B 625 B
middleware-r..fest.js gzip 150 B 151 B N/A
middleware.js gzip 35.7 kB 35.7 kB N/A
edge-runtime..pack.js gzip 1.92 kB 1.92 kB
Overall change 2.55 kB 2.55 kB
Next Runtimes
vercel/next.js canary acdlite/next.js remove-mutable-field-from-action-types Change
app-page-exp...dev.js gzip 168 kB 168 kB
app-page-exp..prod.js gzip 93.8 kB 93.8 kB
app-page-tur..prod.js gzip 94.5 kB 94.5 kB
app-page-tur..prod.js gzip 89.1 kB 89.1 kB
app-page.run...dev.js gzip 138 kB 138 kB
app-page.run..prod.js gzip 88.4 kB 88.4 kB
app-route-ex...dev.js gzip 24.2 kB 24.2 kB
app-route-ex..prod.js gzip 16.8 kB 16.8 kB
app-route-tu..prod.js gzip 16.9 kB 16.9 kB
app-route-tu..prod.js gzip 16.4 kB 16.4 kB
app-route.ru...dev.js gzip 23.6 kB 23.6 kB
app-route.ru..prod.js gzip 16.4 kB 16.4 kB
pages-api-tu..prod.js gzip 9.37 kB 9.37 kB
pages-api.ru...dev.js gzip 9.64 kB 9.64 kB
pages-api.ru..prod.js gzip 9.37 kB 9.37 kB
pages-turbo...prod.js gzip 21.9 kB 21.9 kB
pages.runtim...dev.js gzip 22.6 kB 22.6 kB
pages.runtim..prod.js gzip 21.9 kB 21.9 kB
server.runti..prod.js gzip 49.3 kB 49.3 kB
Overall change 930 kB 930 kB
Diff details
Diff for page.js

Diff too large to display

Diff for 199-HASH.js

Diff too large to display

Commit: cece1de

@acdlite acdlite marked this pull request as ready for review December 4, 2023 00:41
Similar in spirit to vercel#58938.

The app router reducer state used to be managed by useReducer, so it was
written to be resilient to rebasing — the same action may be processed
multiple times. Now that we've lifted the reducer outside of React
(vercel#56497), each action runs only a single time. So we can simplify some
of the logic.

The purpose of the `mutable` field was so that if an action is
processed multiple times, state could be reused between each run; for
example, to prevent redundant network fetches. Now that this scenario
can no longer happen, we can remove it.

I had to update some of the unit tests in navigate-reducer because they
were written with the assumption that the reducer was called
multiple times. As far as I can tell, most of this behavior is covered
by e2e tests anyway, so I don't think it's too risky.
@acdlite acdlite force-pushed the remove-mutable-field-from-action-types branch from fd6d3f0 to cece1de Compare December 4, 2023 01:06
@@ -276,172 +260,6 @@ describe('serverPatchReducer', () => {
`)
})

it('should apply server patch (concurrent)', async () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the same as the previous test except it ran the reducer twice. Since that no longer happens, I deleted it.

Copy link
Member

@ztanner ztanner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌

@acdlite acdlite merged commit 65a74b1 into vercel:canary Dec 4, 2023
67 checks passed
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 19, 2023
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.

None yet

3 participants