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

[Fizz] Prepare Recursive Loop for More Types #21186

Merged
merged 2 commits into from
Apr 7, 2021

Conversation

sebmarkbage
Copy link
Collaborator

This is a step towards adding support for more component types. I split out the rendering of each type of component into a renderX(...) function. These mirror the mountX(...) and updateX(...) functions in Fiber.

There's one architectural piece that I needed to work out to avoid having to duplicate all the code. Resulting in one of my famous weird subtle (arguably over-engineered) architectures.

The simplest form would be to just wrap every call frame in a try/catch and recursively go through the tree. Then spawn a new task at every point something suspends. That's most of what the algorithm already does.

However, try/catch isn't necessarily free in all environments/languages. It's called "long" jump for a reason. Also, spawning a new task needs to allocate a new object and initialize it. The case this gets particularly annoying is when the same component suspends several times - you'd create a new task for each time it suspends.

There are two particular cases where this is unnecessary. If we call through a function component, we're done. We'll never pop back up the stack again. Similarly, if we go through a Context provider (not modeled yet) at the root of a task, we won't ever pop back up to the parent context again. In those cases, we can just mutate the current task and if we suspend we pick up from where ever that task left off. Eventually we get to something like a host component though, where we need to pop back up to render the end tag. Or an array where we need to pop back up to render the sibling.

In this model we have two types of loops. The root loop that just mutates the current task, and if we suspend during this loop, we just reuse that task. For certain nested types of components we enter an inner loop. If this suspends, we spawn a new task and then restore the working state.

So far, that was already how I was modeling it before this PR. However before I was duplicating the pattern matching and component rendering logic. The new thing here is that it now reuses the same logic.

First, I switched the outer loop to be recursive instead of a while loop. This will be useful for keep the component stack on the real stack so that we can recreate it for production errors.

Then I unified the two recursive functions. They are now both destructive in that they mutate the task's current node. If something suspends, we pick up at the last node that was mutated.

Another important interesting quirk is that we don't use finally to restore context when we pop. That's so that the catch above can see what the context was at the place we threw. Instead, we restore the context in those inner catches if something threw.

@sebmarkbage sebmarkbage requested a review from acdlite April 6, 2021 17:01
@facebook-github-bot facebook-github-bot added React Core Team Opened by a member of the React Core Team CLA Signed labels Apr 6, 2021
@sizebot
Copy link

sizebot commented Apr 6, 2021

Comparing: 172e89b...deb8aa9

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 = 122.61 kB 122.61 kB = 39.34 kB 39.34 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 129.17 kB 129.17 kB = 41.43 kB 41.43 kB
facebook-www/ReactDOM-prod.classic.js = 412.44 kB 412.44 kB = 76.21 kB 76.21 kB
facebook-www/ReactDOM-prod.modern.js = 400.49 kB 400.49 kB = 74.33 kB 74.33 kB
facebook-www/ReactDOMForked-prod.classic.js = 412.44 kB 412.44 kB = 76.21 kB 76.21 kB
oss-experimental/react-server/cjs/react-server.development.js +4.83% 37.13 kB 38.92 kB +4.83% 9.69 kB 10.15 kB
oss-stable/react-server/cjs/react-server.development.js +4.83% 37.13 kB 38.92 kB +4.83% 9.69 kB 10.15 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-server/cjs/react-server.development.js +4.83% 37.13 kB 38.92 kB +4.83% 9.69 kB 10.15 kB
oss-stable/react-server/cjs/react-server.development.js +4.83% 37.13 kB 38.92 kB +4.83% 9.69 kB 10.15 kB
oss-experimental/react-dom/cjs/react-dom-unstable-fizz.node.development.js +1.35% 133.13 kB 134.92 kB +1.51% 31.87 kB 32.35 kB
oss-experimental/react-dom/cjs/react-dom-unstable-fizz.browser.development.js +1.35% 133.18 kB 134.97 kB +1.51% 31.97 kB 32.45 kB
oss-experimental/react-dom/umd/react-dom-unstable-fizz.browser.development.js +1.33% 140.14 kB 142.00 kB +1.55% 32.33 kB 32.83 kB

Generated by 🚫 dangerJS against deb8aa9

task.node = node;
// TODO: Classes and legacy context etc.
node = element.type(element.props);
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is the duplication that I was aiming to get rid of. Normally I'd probably be ok duplicating this code but it's quite important that these don't go out of sync as we add new types.

This is similar to the structure of beginWork in Fiber.
This lets us reuse render node at the root which doesn't spawn new work.
Copy link
Collaborator

@acdlite acdlite left a comment

Choose a reason for hiding this comment

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

Clever! (But not too clever, I think!)

@sebmarkbage sebmarkbage merged commit ad6e6ec into facebook:master Apr 7, 2021
acdlite pushed a commit to acdlite/react that referenced this pull request Apr 11, 2021
* Split out into helper functions

This is similar to the structure of beginWork in Fiber.

* Split the rendering of a node from recursively rendering a node

This lets us reuse render node at the root which doesn't spawn new work.
acdlite pushed a commit to acdlite/react that referenced this pull request Apr 13, 2021
* Split out into helper functions

This is similar to the structure of beginWork in Fiber.

* Split the rendering of a node from recursively rendering a node

This lets us reuse render node at the root which doesn't spawn new work.
acdlite pushed a commit to acdlite/react that referenced this pull request Apr 16, 2021
* Split out into helper functions

This is similar to the structure of beginWork in Fiber.

* Split the rendering of a node from recursively rendering a node

This lets us reuse render node at the root which doesn't spawn new work.
acdlite pushed a commit to acdlite/react that referenced this pull request Apr 16, 2021
* Split out into helper functions

This is similar to the structure of beginWork in Fiber.

* Split the rendering of a node from recursively rendering a node

This lets us reuse render node at the root which doesn't spawn new work.
acdlite pushed a commit to acdlite/react that referenced this pull request Apr 19, 2021
* Split out into helper functions

This is similar to the structure of beginWork in Fiber.

* Split the rendering of a node from recursively rendering a node

This lets us reuse render node at the root which doesn't spawn new work.
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 20, 2021
Summary:
This sync includes the following changes:
- **[f7cdc8936](facebook/react@f7cdc8936 )**: Also turn off enableSyncDefaultUpdates in RN test renderer ([#21293](facebook/react#21293)) //<Ricky>//
- **[4c9eb2af1](facebook/react@4c9eb2af1 )**: Add dynamic flags to React Native ([#21291](facebook/react#21291)) //<Ricky>//
- **[9eddfbf5a](facebook/react@9eddfbf5a )**: [Fizz] Two More Fixes ([#21288](facebook/react#21288)) //<Sebastian Markbåge>//
- **[11b07597e](facebook/react@11b07597e )**: Fix classes ([#21283](facebook/react#21283)) //<Sebastian Markbåge>//
- **[96d00b9bb](facebook/react@96d00b9bb )**: [Fizz] Random Fixes ([#21277](facebook/react#21277)) //<Sebastian Markbåge>//
- **[81ef53953](facebook/react@81ef53953 )**: Always insert a dummy node with an ID into fallbacks ([#21272](facebook/react#21272)) //<Sebastian Markbåge>//
- **[a4a940d7a](facebook/react@a4a940d7a )**: [Fizz] Add unsupported Portal/Scope components ([#21261](facebook/react#21261)) //<Sebastian Markbåge>//
- **[f4d7a0f1e](facebook/react@f4d7a0f1e )**: Implement useOpaqueIdentifier ([#21260](facebook/react#21260)) //<Sebastian Markbåge>//
- **[dde875dfb](facebook/react@dde875dfb )**: [Fizz] Implement Hooks ([#21257](facebook/react#21257)) //<Sebastian Markbåge>//
- **[a597c2f5d](facebook/react@a597c2f5d )**: [Fizz] Fix reentrancy bug ([#21270](facebook/react#21270)) //<Sebastian Markbåge>//
- **[15e779d92](facebook/react@15e779d92 )**: Reconciler should inject its own version into DevTools hook ([#21268](facebook/react#21268)) //<Brian Vaughn>//
- **[4f76a28c9](facebook/react@4f76a28c9 )**: [Fizz] Implement New Context ([#21255](facebook/react#21255)) //<Sebastian Markbåge>//
- **[82ef450e0](facebook/react@82ef450e0 )**: remove obsolete SharedArrayBuffer ESLint config ([#21259](facebook/react#21259)) //<Henry Q. Dineen>//
- **[dbadfa2c3](facebook/react@dbadfa2c3 )**: [Fizz] Classes Follow Up ([#21253](facebook/react#21253)) //<Sebastian Markbåge>//
- **[686b635b7](facebook/react@686b635b7 )**: Prevent reading canonical property of null ([#21242](facebook/react#21242)) //<Joshua Gross>//
- **[bb88ce95a](facebook/react@bb88ce95a )**: Bugfix: Don't rely on `finishedLanes` for passive effects ([#21233](facebook/react#21233)) //<Andrew Clark>//
- **[343710c92](facebook/react@343710c92 )**: [Fizz] Fragments and Iterable support ([#21228](facebook/react#21228)) //<Sebastian Markbåge>//
- **[933880b45](facebook/react@933880b45 )**: Make time-slicing opt-in ([#21072](facebook/react#21072)) //<Ricky>//
- **[b0407b55f](facebook/react@b0407b55f )**: Support more empty types ([#21225](facebook/react#21225)) //<Sebastian Markbåge>//
- **[39713716a](facebook/react@39713716a )**: Merge isObject branches ([#21226](facebook/react#21226)) //<Sebastian Markbåge>//
- **[8a4a59c72](facebook/react@8a4a59c72 )**: Remove textarea special case from child fiber ([#21222](facebook/react#21222)) //<Sebastian Markbåge>//
- **[dc108b0f5](facebook/react@dc108b0f5 )**: Track which fibers scheduled the current render work ([#15658](facebook/react#15658)) //<Brian Vaughn>//
- **[6ea749170](facebook/react@6ea749170 )**: Fix typo in comment ([#21214](facebook/react#21214)) //<inokawa>//
- **[b38ac13f9](facebook/react@b38ac13f9 )**: DevTools: Add post-commit hook ([#21183](facebook/react#21183)) //<Brian Vaughn>//
- **[b943aeba8](facebook/react@b943aeba8 )**: Fix: Passive effect updates are never sync ([#21215](facebook/react#21215)) //<Andrew Clark>//
- **[d389c54d1](facebook/react@d389c54d1 )**: Offscreen: Use JS stack to track hidden/unhidden subtree state ([#21211](facebook/react#21211)) //<Brian Vaughn>//
- **[c486dc1a4](facebook/react@c486dc1a4 )**: Remove unnecessary processUpdateQueue ([#21199](facebook/react#21199)) //<Sebastian Markbåge>//
- **[cf45a623a](facebook/react@cf45a623a )**: [Fizz] Implement Classes ([#21200](facebook/react#21200)) //<Sebastian Markbåge>//
- **[75c616554](facebook/react@75c616554 )**: Include actual type of `Profiler#id` on type mismatch ([#20306](facebook/react#20306)) //<Sebastian Silbermann>//
- **[1214b302e](facebook/react@1214b302e )**: test: Fix "couldn't locate all inline snapshots" ([#21205](facebook/react#21205)) //<Sebastian Silbermann>//
- **[1a02d2792](facebook/react@1a02d2792 )**: style: delete unused isHost check ([#21203](facebook/react#21203)) //<wangao>//
- **[782f689ca](facebook/react@782f689ca )**: Don't double invoke getDerivedStateFromProps for module pattern ([#21193](facebook/react#21193)) //<Sebastian Markbåge>//
- **[e90c76a65](facebook/react@e90c76a65 )**: Revert "Offscreen: Use JS stack to track hidden/unhidden subtree state" ([#21194](facebook/react#21194)) //<Brian Vaughn>//
- **[1f8583de8](facebook/react@1f8583de8 )**: Offscreen: Use JS stack to track hidden/unhidden subtree state ([#21192](facebook/react#21192)) //<Brian Vaughn>//
- **[ad6e6ec7b](facebook/react@ad6e6ec7b )**: [Fizz] Prepare Recursive Loop for More Types ([#21186](facebook/react#21186)) //<Sebastian Markbåge>//
- **[172e89b4b](facebook/react@172e89b4b )**: Reland Remove redundant initial of isArray ([#21188](facebook/react#21188)) //<Sebastian Markbåge>//
- **[7c1ba2b57](facebook/react@7c1ba2b57 )**: Proposed new Suspense layout effect semantics ([#21079](facebook/react#21079)) //<Brian Vaughn>//
- **[316aa3686](facebook/react@316aa3686 )**: [Scheduler] Fix de-opt caused by out-of-bounds access ([#21147](facebook/react#21147)) //<Andrey Marchenko>//
- **[b4f119cdf](facebook/react@b4f119cdf )**: Revert "Remove redundant initial of isArray ([#21163](facebook/react#21163))" //<Sebastian Markbage>//
- **[c03197063](facebook/react@c03197063 )**: Revert "apply prettier ([#21165](facebook/react#21165))" //<Sebastian Markbage>//
- **[94fd1214d](facebook/react@94fd1214d )**: apply prettier ([#21165](facebook/react#21165)) //<Behnam Mohammadi>//
- **[b130a0f5c](facebook/react@b130a0f5c )**: Remove redundant initial of isArray ([#21163](facebook/react#21163)) //<Behnam Mohammadi>//
- **[2c9fef32d](facebook/react@2c9fef32d )**: Remove redundant initial of hasOwnProperty ([#21134](facebook/react#21134)) //<Behnam Mohammadi>//
- **[1cf9978d8](facebook/react@1cf9978d8 )**: Don't pass internals to callbacks ([#21161](facebook/react#21161)) //<Sebastian Markbåge>//
- **[b9e4c10e9](facebook/react@b9e4c10e9 )**: [Fizz] Implement all the DOM attributes and special cases ([#21153](facebook/react#21153)) //<Sebastian Markbåge>//
- **[f8ef4ff57](facebook/react@f8ef4ff57 )**: Flush discrete passive effects before paint ([#21150](facebook/react#21150)) //<Andrew Clark>//
- **[b48b38af6](facebook/react@b48b38af6 )**: Support nesting of startTransition and flushSync (alt) ([#21149](facebook/react#21149)) //<Sebastian Markbåge>//

Changelog:
[General][Changed] - React Native sync for revisions c9aab1c...f7cdc89

jest_e2e[run_all_tests]

Reviewed By: rickhanlonii

Differential Revision: D27740113

fbshipit-source-id: 6e27204d78e3e16ed205170006cb97c0d6bfa957
koto pushed a commit to koto/react that referenced this pull request Jun 15, 2021
* Split out into helper functions

This is similar to the structure of beginWork in Fiber.

* Split the rendering of a node from recursively rendering a node

This lets us reuse render node at the root which doesn't spawn new work.
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.

4 participants