Track the key path difference between right before the first array #27360

sebmarkbage · 2023-09-12T02:28:55Z

There's a subtle difference if you suspend before the first array or after. In Fiber, we don't deal with this because we just suspend the parent and replay it if lazy() or Usable are used in its child slots. In Fizz we try to optimize this a bit more and enable resuming inside the component.

Semantically, it's different if you suspend/postpone before the first child array or inside that child array. Because when you resume the inner result might be another array and either that's part of the parent path or part of the inner slot.

There might be more clever way of structuring this but I just use -1 to indicate that we're not yet inside the array and is in the root child position. If that renders an element, then that's just the same as the 0 slot.

We need to also encode this in the resuming. I called that resuming the element or resuming the slot.

react-sizebot · 2023-09-12T02:32:32Z

Comparing: bb1d8d1...5e3806d

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	165.63 kB	165.63 kB	=	51.88 kB	51.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	174.88 kB	174.88 kB	=	54.70 kB	54.70 kB
facebook-www/ReactDOM-prod.classic.js	=	570.44 kB	570.44 kB	=	100.45 kB	100.45 kB
facebook-www/ReactDOM-prod.modern.js	=	554.21 kB	554.21 kB	=	97.61 kB	97.61 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js	=	74.14 kB	73.98 kB	=	22.85 kB	22.81 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.min.js	=	73.87 kB	73.70 kB	=	22.68 kB	22.65 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js	=	71.68 kB	71.51 kB	=	21.75 kB	21.71 kB
facebook-www/ReactDOMServer-dev.classic.js	=	369.14 kB	368.27 kB	=	81.81 kB	81.64 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.min.js	=	70.10 kB	69.93 kB	=	21.47 kB	21.43 kB
facebook-www/ReactDOMServer-dev.modern.js	=	361.71 kB	360.85 kB	=	80.15 kB	79.99 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js	=	69.41 kB	69.25 kB	=	21.18 kB	21.13 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js	=	69.54 kB	69.37 kB	=	21.45 kB	21.43 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js	=	356.91 kB	356.04 kB	=	78.99 kB	78.83 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js	=	66.55 kB	66.38 kB	=	20.08 kB	20.04 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js	=	66.70 kB	66.54 kB	=	20.51 kB	20.47 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js	=	353.95 kB	353.04 kB	=	79.45 kB	79.31 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js	=	353.92 kB	353.01 kB	=	79.43 kB	79.29 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js	=	353.74 kB	352.83 kB	=	79.48 kB	79.34 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js	=	353.71 kB	352.80 kB	=	79.45 kB	79.31 kB
oss-stable/react-dom/cjs/react-dom-server.edge.development.js	=	352.67 kB	351.76 kB	=	79.57 kB	79.43 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.development.js	=	352.64 kB	351.73 kB	=	79.54 kB	79.40 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js	=	352.26 kB	351.35 kB	=	79.45 kB	79.30 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js	=	352.23 kB	351.32 kB	=	79.41 kB	79.27 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js	=	352.04 kB	351.13 kB	=	79.00 kB	78.86 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js	=	352.01 kB	351.11 kB	=	78.97 kB	78.83 kB
oss-stable/react-dom/cjs/react-dom-server.bun.development.js	=	349.48 kB	348.57 kB	=	78.51 kB	78.37 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.development.js	=	349.45 kB	348.55 kB	=	78.48 kB	78.34 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js	=	369.15 kB	368.19 kB	=	80.33 kB	80.19 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js	=	369.13 kB	368.17 kB	=	80.30 kB	80.17 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js	=	368.93 kB	367.97 kB	=	79.85 kB	79.72 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js	=	368.91 kB	367.95 kB	=	79.82 kB	79.69 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js	=	68.46 kB	68.25 kB	=	21.35 kB	21.29 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js	=	68.43 kB	68.22 kB	=	21.33 kB	21.27 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.min.js	=	68.40 kB	68.19 kB	=	21.34 kB	21.28 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.min.js	=	68.37 kB	68.16 kB	=	21.31 kB	21.26 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js	=	68.08 kB	67.87 kB	=	20.61 kB	20.56 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js	=	68.05 kB	67.84 kB	=	20.59 kB	20.53 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.min.js	=	66.49 kB	66.29 kB	=	20.31 kB	20.25 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.min.js	=	66.47 kB	66.26 kB	=	20.29 kB	20.23 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js	=	64.31 kB	64.10 kB	=	20.17 kB	20.14 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js	=	64.28 kB	64.08 kB	=	20.14 kB	20.12 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js	=	64.16 kB	63.96 kB	=	19.89 kB	19.85 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js	=	64.14 kB	63.93 kB	=	19.87 kB	19.82 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js	=	63.19 kB	62.98 kB	=	18.99 kB	18.94 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js	=	63.17 kB	62.96 kB	=	18.97 kB	18.92 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js	=	63.35 kB	63.15 kB	=	19.31 kB	19.27 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js	=	63.33 kB	63.12 kB	=	19.29 kB	19.25 kB
oss-experimental/react-server/cjs/react-server.development.js	=	166.44 kB	165.82 kB	=	40.89 kB	40.84 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js	=	159.09 kB	158.44 kB	=	29.47 kB	29.40 kB
facebook-www/ReactDOMServer-prod.classic.js	=	157.85 kB	157.20 kB	=	28.74 kB	28.66 kB
facebook-www/ReactDOMServer-prod.modern.js	=	156.95 kB	156.30 kB	=	28.50 kB	28.43 kB
oss-experimental/react-server/cjs/react-server.production.min.js	=	29.29 kB	29.13 kB	=	9.68 kB	9.65 kB
oss-stable-semver/react-server/cjs/react-server.development.js	=	155.23 kB	154.32 kB	=	38.14 kB	38.00 kB
oss-stable/react-server/cjs/react-server.development.js	=	155.23 kB	154.32 kB	=	38.14 kB	38.00 kB
oss-stable-semver/react-server/cjs/react-server.production.min.js	=	27.22 kB	27.02 kB	=	9.10 kB	9.06 kB
oss-stable/react-server/cjs/react-server.production.min.js	=	27.22 kB	27.02 kB	=	9.10 kB	9.06 kB

Generated by 🚫 dangerJS against 5e3806d

…d after There's a subtle difference if you suspend before the first array or after. In Fiber, we don't deal with this because we just suspend the parent and replay it if lazy() or Usable are used in its child slots. In Fizz we try to optimize this a bit more and enable resuming inside the component. Semantically, it's different if you suspend/postpone before the first child array or inside that child array. Because when you resume the inner result might be another array and either that's part of the parent path or part of the inner slot. There might be more clever way of structuring this but I just use -1 to indicate that we're not yet inside the array and is in the root child position. If that renders an element, then that's just the same as the 0 slot. We need to also encode this in the resuming.

sebmarkbage · 2023-09-12T02:34:37Z

packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js

@@ -461,7 +461,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
      if (prerendering) {
        React.unstable_postpone();
      }
-      return 'Hello';
+      return ['Hello', 'World'];


We have another test that tests a single return value. This test ensures we revisit both paths and not just "slot 0".

…27360) There's a subtle difference if you suspend before the first array or after. In Fiber, we don't deal with this because we just suspend the parent and replay it if lazy() or Usable are used in its child slots. In Fizz we try to optimize this a bit more and enable resuming inside the component. Semantically, it's different if you suspend/postpone before the first child array or inside that child array. Because when you resume the inner result might be another array and either that's part of the parent path or part of the inner slot. There might be more clever way of structuring this but I just use -1 to indicate that we're not yet inside the array and is in the root child position. If that renders an element, then that's just the same as the 0 slot. We need to also encode this in the resuming. I called that resuming the element or resuming the slot. DiffTrain build for [7a3cb8f](7a3cb8f)

…acebook#27360) There's a subtle difference if you suspend before the first array or after. In Fiber, we don't deal with this because we just suspend the parent and replay it if lazy() or Usable are used in its child slots. In Fizz we try to optimize this a bit more and enable resuming inside the component. Semantically, it's different if you suspend/postpone before the first child array or inside that child array. Because when you resume the inner result might be another array and either that's part of the parent path or part of the inner slot. There might be more clever way of structuring this but I just use -1 to indicate that we're not yet inside the array and is in the root child position. If that renders an element, then that's just the same as the 0 slot. We need to also encode this in the resuming. I called that resuming the element or resuming the slot.

…27360) There's a subtle difference if you suspend before the first array or after. In Fiber, we don't deal with this because we just suspend the parent and replay it if lazy() or Usable are used in its child slots. In Fizz we try to optimize this a bit more and enable resuming inside the component. Semantically, it's different if you suspend/postpone before the first child array or inside that child array. Because when you resume the inner result might be another array and either that's part of the parent path or part of the inner slot. There might be more clever way of structuring this but I just use -1 to indicate that we're not yet inside the array and is in the root child position. If that renders an element, then that's just the same as the 0 slot. We need to also encode this in the resuming. I called that resuming the element or resuming the slot. DiffTrain build for commit 7a3cb8f.

sebmarkbage requested a review from acdlite September 12, 2023 02:28

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 12, 2023

sebmarkbage force-pushed the encoderesumeslot branch from 7e018e7 to 31cdd75 Compare September 12, 2023 02:33

sebmarkbage force-pushed the encoderesumeslot branch from 31cdd75 to 5e3806d Compare September 12, 2023 02:33

sebmarkbage commented Sep 12, 2023

View reviewed changes

acdlite approved these changes Sep 12, 2023

View reviewed changes

sebmarkbage merged commit 7a3cb8f into facebook:main Sep 12, 2023
2 checks passed

acdlite mentioned this pull request Sep 14, 2023

Update React from dd480ef92 to d6dcad6a8. vercel/next.js#55399

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Track the key path difference between right before the first array #27360

Track the key path difference between right before the first array #27360

sebmarkbage commented Sep 12, 2023 •

edited

Loading

react-sizebot commented Sep 12, 2023 •

edited

Loading

sebmarkbage Sep 12, 2023

Track the key path difference between right before the first array #27360

Track the key path difference between right before the first array #27360

Conversation

sebmarkbage commented Sep 12, 2023 • edited Loading

react-sizebot commented Sep 12, 2023 • edited Loading

Critical size changes

Significant size changes

sebmarkbage Sep 12, 2023

Choose a reason for hiding this comment

sebmarkbage commented Sep 12, 2023 •

edited

Loading

react-sizebot commented Sep 12, 2023 •

edited

Loading