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

Effects list refactor #19261

Closed
wants to merge 8 commits into from
Closed

Conversation

bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Jul 6, 2020

This branch is phase one of a planned effects list refactor. It includes the following changes:

  • Replace effects list usage with traversing the Fiber tree for before-mutation, mutation, and layout effects phases.
  • Track pending deletions in a new deletions Fiber field.
  • Track which effects exist below a Fiber using a new subtreeTag mask field to optimize traversal during commit phase.

All unit tests pass in this branch, although one or two required some slight tweaking.

This PR specifically does not include the following refactor pieces:

  • Removing the effects list attributes (firstEffect, lastEffect, and nextEffect).
  • Traversing the Fiber tree for passive effects.
  • Any of the new hidden/offscreen features.
  • Optimizing the new subtreeTag field.

Additional follow up work:

  • We may be over-traversing during the commit phase now in the case where only some children are cloned. (In this case, we may end up continually traversing bailed out trees.) Maybe a better route would be to set a flag on a Fiber that explicitly marks when we bailed out (during the begin phase). Then we could just check this attribute to know without having to use the hacky wasFiberCloned heuristic.

Co-authored-by: Luna Ruan luna@fb.com

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jul 6, 2020
@bvaughn bvaughn marked this pull request as draft July 6, 2020 17:29
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 6, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fed95cf:

Sandbox Source
React Configuration

@sizebot
Copy link

sizebot commented Jul 6, 2020

Details of bundled changes.

Comparing: 61dd00d...fed95cf

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js 0.0% -0.0% 881.08 KB 881.08 KB 201.79 KB 201.79 KB NODE_DEV
ReactDOMForked-prod.js 🔺+0.1% 🔺+0.2% 404.37 KB 404.67 KB 74.7 KB 74.88 KB FB_WWW_PROD
react-dom-server.node.development.js 0.0% -0.0% 137.33 KB 137.33 KB 36.47 KB 36.47 KB NODE_DEV
ReactDOMForked-profiling.js 0.0% +0.2% 415.05 KB 415.15 KB 76.45 KB 76.6 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% -0.0% 143.45 KB 143.45 KB 36.68 KB 36.68 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% -0.0% 10.34 KB 10.34 KB 4.06 KB 4.06 KB UMD_PROD
ReactDOMTesting-dev.js 0.0% -0.0% 981.67 KB 981.67 KB 219.6 KB 219.6 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% -0.0% 51.13 KB 51.13 KB 14.89 KB 14.89 KB NODE_DEV
ReactDOMTesting-prod.js 0.0% 0.0% 412.26 KB 412.26 KB 77.35 KB 77.35 KB FB_WWW_PROD
react-dom-test-utils.production.min.js 0.0% -0.0% 10.19 KB 10.19 KB 3.98 KB 3.98 KB NODE_PROD
react-dom.development.js 0.0% -0.0% 925.65 KB 925.65 KB 204.19 KB 204.18 KB UMD_DEV
react-dom.profiling.min.js 0.0% 0.0% 122.72 KB 122.72 KB 40.15 KB 40.15 KB UMD_PROFILING
ReactDOMForked-dev.js +0.3% +0.3% 1000.35 KB 1003.02 KB 223.07 KB 223.75 KB FB_WWW_DEV
react-dom-server.browser.development.js 0.0% -0.0% 136.06 KB 136.06 KB 36.22 KB 36.22 KB NODE_DEV
ReactDOM-profiling.js 0.0% 0.0% 420 KB 420 KB 77.44 KB 77.44 KB FB_WWW_PROFILING
ReactDOMServer-prod.js 0.0% -0.0% 47.56 KB 47.56 KB 11.14 KB 11.14 KB FB_WWW_PROD

ReactDOM: size: 0.0%, gzip: -0.0%

Size changes (stable)

Generated by 🚫 dangerJS against fed95cf

@sizebot
Copy link

sizebot commented Jul 6, 2020

Details of bundled changes.

Comparing: 61dd00d...fed95cf

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js 0.0% -0.0% 913.62 KB 913.62 KB 207.67 KB 207.66 KB NODE_DEV
ReactDOMForked-prod.js 🔺+0.1% 🔺+0.2% 393.25 KB 393.54 KB 73.18 KB 73.33 KB FB_WWW_PROD
react-dom-server.node.development.js 0.0% -0.0% 138.84 KB 138.84 KB 36.68 KB 36.68 KB NODE_DEV
ReactDOMForked-profiling.js 0.0% +0.2% 403.87 KB 403.96 KB 74.92 KB 75.07 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% -0.0% 145.04 KB 145.04 KB 36.88 KB 36.88 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% -0.0% 10.35 KB 10.35 KB 4.07 KB 4.07 KB UMD_PROD
ReactDOMTesting-dev.js 0.0% 0.0% 953.54 KB 953.54 KB 213.71 KB 213.71 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% -0.0% 51.15 KB 51.15 KB 14.9 KB 14.9 KB NODE_DEV
react-dom-unstable-fizz.node.development.js 0.0% -0.1% 5.61 KB 5.61 KB 1.86 KB 1.86 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% -0.0% 10.2 KB 10.2 KB 3.99 KB 3.99 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% -0.1% 5.36 KB 5.36 KB 1.8 KB 1.8 KB UMD_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.2% 1.17 KB 1.17 KB 665 B 666 B NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% -0.1% 4.87 KB 4.87 KB 1.7 KB 1.7 KB NODE_DEV
react-dom.development.js 0.0% -0.0% 959.63 KB 959.63 KB 210.19 KB 210.18 KB UMD_DEV
react-dom.production.min.js 0.0% -0.0% 123.49 KB 123.49 KB 40.42 KB 40.42 KB UMD_PROD
ReactDOMForked-dev.js +0.3% +0.3% 974.82 KB 977.49 KB 217.87 KB 218.55 KB FB_WWW_DEV
ReactDOM-dev.js 0.0% 0.0% 988.73 KB 988.73 KB 220.11 KB 220.11 KB FB_WWW_DEV
react-dom-server.browser.development.js 0.0% -0.0% 137.57 KB 137.57 KB 36.43 KB 36.43 KB NODE_DEV
react-dom-server.browser.production.min.js 0.0% -0.0% 20.29 KB 20.29 KB 7.52 KB 7.52 KB NODE_PROD
ReactDOMServer-dev.js 0.0% -0.0% 143.33 KB 143.33 KB 36.42 KB 36.42 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% -0.0% 55.53 KB 55.53 KB 15.37 KB 15.37 KB UMD_DEV

ReactDOM: size: 0.0%, gzip: -0.0%

Size changes (experimental)

Generated by 🚫 dangerJS against fed95cf

@bvaughn bvaughn marked this pull request as ready for review July 7, 2020 21:28
@bvaughn bvaughn changed the title [DO NOT MERGE] Effects list refactor Effects list refactor Jul 7, 2020
@bvaughn bvaughn force-pushed the effects_list_refactor branch 2 times, most recently from 5579f7b to 5cfe800 Compare July 10, 2020 17:08
Brian Vaughn added 6 commits July 11, 2020 12:43

commitBeforeMutationEffectOnFiber(current, nextEffect);
if (fiber.sibling !== null) {
commitBeforeMutationEffects(fiber.sibling);
Copy link
Collaborator

@sebmarkbage sebmarkbage Jul 15, 2020

Choose a reason for hiding this comment

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

It's unusually to have very deep trees but it's not that unusual to have a few hundred of items in a list. This could cause a stack overflow in that case. We should probably keep the while loop for siblings but not for the recursive effects.

It doesn't even have to be a particularly long list. 10th child inside the 10th child inside the 10th child etc.

@bvaughn
Copy link
Contributor Author

bvaughn commented Jul 16, 2020

Already merged via #19322

@bvaughn bvaughn closed this Jul 16, 2020
@bvaughn bvaughn deleted the effects_list_refactor branch July 16, 2020 13:10
@gaearon gaearon mentioned this pull request Jun 9, 2021
63 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants