Don't fire passive effects during initial mount of a hidden Offscreen tree #24967
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
React Core Team
|
Comparing: 6b28bc9...e6a705b Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show |
acdlite
force-pushed
the
dont-mount-passive-during-prerendering
branch
from
f162769
to
42a484e
Compare
The isHidden field of OffscreenInstance is a boolean that represents whether the tree is currently hidden. To implement resuable effects, we need to also track whether the passive effects are currently connected. So I've changed this field to a bitmask. No other behavior has changed in this commit. I'll update the effects behavior in the following steps.
I'm about to add a "reappear passive effects" function that will share much of the same code as commitPassiveMountEffectOnFiber. To minimize the duplicated code, I've extracted the shared parts into separate functions, similar to what I did for commitLayoutEffectOnFiber and reappearLayoutEffects. This may not save much on code size because Closure will likely inline some of it, anyway, but it makes it harder for the two paths to accidentally diverge.
This changes the behavior of Offscreen so that passive effects do not fire when prerendering a brand new tree. Previously, Offscreen did not affect passive effects at all — only layout effects, which mount or unmount whenever the visibility of the tree changes. When hiding an already visible tree, the behavior of passive effects is unchanged, for now; unlike layout effects, the passive effects will not get unmounted. Pre-rendered updates to a hidden tree in this state will also fire normally. This is only temporary, though — the plan is for passive effects to act more like layout effects, and unmount them when the tree is hidden. Perhaps after a delay so that if the visibility toggles quickly back and forth, the effects don't need to remount. I'll implement this separately.
There are a few cases where commit phase logic always needs to fire even inside a hidden tree. In general, we should try to design algorithms that don't depend on a commit effect running during prerendering, but there's at least one case where I think it makes sense. The experimental Cache component uses reference counting to keep track of the lifetime of a cache instance. This allows us to expose an AbortSignal object that data frameworks can use to cancel aborted requests. These cache objects are considered alive even inside a prerendered tree. To implement this I added an "atomic" passive effect traversal that runs even when a tree is hidden. (As a follow up, we should add a special subtree flag so that we can skip over nodes that don't have them. There are a number of similar subtree flag optimizations that we have planned, so I'll leave them for a later refactor.) The only other feature that currently depends on this behavior is Transition Tracing. I did not add a test for this because Transition Tracing is still in development and doesn't yet work with Offscreen.
acdlite
force-pushed
the
dont-mount-passive-during-prerendering
branch
from
42a484e
to
e6a705b
Compare
rickhanlonii
approved these changes
Jul 28, 2022
sebmarkbage
approved these changes
Jul 28, 2022
facebook-github-bot
pushed a commit
to facebook/react-native
that referenced
this pull request
Sep 8, 2022
Summary: This sync includes the following changes: - **[4ea064eb0](facebook/react@4ea064eb0 )**: Don't fire passive effects during initial mount of a hidden Offscreen tree ([#24967](facebook/react#24967)) //<Andrew Clark>// - **[2c7dea736](facebook/react@2c7dea736 )**: Implement Offscreen in Fizz ([#24988](facebook/react#24988)) //<Andrew Clark>// - **[49f8254d6](facebook/react@49f8254d6 )**: Bug fix for <App /> vs. <Counter /> ([#24972](facebook/react#24972)) //<davidrenne>// - **[6b28bc9c5](facebook/react@6b28bc9c5 )**: test: Throw custom error instead of relying on runtime error ([#24946](facebook/react#24946)) //<Sebastian Silbermann>// - **[9bd0dd4c1](facebook/react@9bd0dd4c1 )**: test(react-debug-tools): Improve coverage of currentDispatcher.current setter ([#24945](facebook/react#24945)) //<Sebastian Silbermann>// - **[59bc52a16](facebook/react@59bc52a16 )**: Add 4.5.0 release to eslint rules CHANGELOG ([#24853](facebook/react#24853)) //<Sebastian Silbermann>// - **[cfb6cfa25](facebook/react@cfb6cfa25 )**: Reused components commit with timing as new ones //<Andrew Clark>// - **[679eea328](facebook/react@679eea328 )**: Extract layout effects to separate functions //<Andrew Clark>// - **[41287d447](facebook/react@41287d447 )**: Use recursion to traverse during "reappear layout" phase //<Andrew Clark>// - **[697702bf3](facebook/react@697702bf3 )**: Use recursion to traverse during "disappear layout" phase //<Andrew Clark>// - **[02206099a](facebook/react@02206099a )**: Use recursion to traverse during passive unmount phase ([#24918](facebook/react#24918)) //<Andrew Clark>// - **[f62949519](facebook/react@f62949519 )**: [Transition Tracing] Rename transitionCallbacks to unstable_transitionCallbacks ([#24920](facebook/react#24920)) //<Luna Ruan>// - **[7a4336c40](facebook/react@7a4336c40 )**: Use recursion to traverse during passive mount phase //<Andrew Clark>// - **[bb1357b38](facebook/react@bb1357b38 )**: Wrap try-catch directly around each user function //<Andrew Clark>// - **[de3c06984](facebook/react@de3c06984 )**: Move flag check into each switch case //<Andrew Clark>// - **[f5916d15b](facebook/react@f5916d15b )**: [Transition Tracing][Code Cleanup] Delete Marker Name Change Tests ([#24908](facebook/react#24908)) //<Luna Ruan>// - **[fa20b319f](facebook/react@fa20b319f )**: [Transition Tracing] Code Cleanup ([#24880](facebook/react#24880)) //<Luna Ruan>// - **[5e8c1961c](facebook/react@5e8c1961c )**: [Transition Tracing] onMarkerProgress ([#24861](facebook/react#24861)) //<Luna Ruan>// - **[b641d0209](facebook/react@b641d0209 )**: Use recursion to traverse during layout phase //<Andrew Clark>// - **[a1b1e391e](facebook/react@a1b1e391e )**: Wrap try-catch directly around each user function //<Andrew Clark>// - **[3df7e8f5d](facebook/react@3df7e8f5d )**: Move flag check into each switch case //<Andrew Clark>// - **[b8c96b136](facebook/react@b8c96b136 )**: Move ref commit effects inside switch statement //<Andrew Clark>// - **[e225fa43a](facebook/react@e225fa43a )**: [Transition Tracing] Don't call transition callbacks if no transition name specified ([#24887](facebook/react#24887)) //<Luna Ruan>// - **[dd2d65227](facebook/react@dd2d65227 )**: [Transition Tracing] Tracing Marker Name Change in Update Warning ([#24873](facebook/react#24873)) //<Luna Ruan>// - **[80208e769](facebook/react@80208e769 )**: [Transition Tracing] Add onTransitionProgress Callback ([#24833](facebook/react#24833)) //<Luna Ruan>// - **[30eb267ab](facebook/react@30eb267ab )**: Land forked reconciler changes ([#24878](facebook/react#24878)) //<Andrew Clark>// - **[5e4e2dae0](facebook/react@5e4e2dae0 )**: Defer setState callbacks until component is visible ([#24872](facebook/react#24872)) //<Andrew Clark>// - **[8e35b5060](facebook/react@8e35b5060 )**: [Transition Tracing] Refactor Code to Remove OffscreeInstance TODOs ([#24855](facebook/react#24855)) //<Luna Ruan>// - **[deab1263a](facebook/react@deab1263a )**: [Transition Tracing] Change Transition Type Passed Pending Transitions ([#24856](facebook/react#24856)) //<Luna Ruan>// - **[82e9e9909](facebook/react@82e9e9909 )**: Suspending inside a hidden tree should not cause fallbacks to appear ([#24699](facebook/react#24699)) //<Andrew Clark>// Changelog: [General][Changed] - React Native sync for revisions c1f5884...4ea064e jest_e2e[run_all_tests] Reviewed By: philIip, NickGerleman Differential Revision: D39305648 fbshipit-source-id: 627ead5035c77fbc902b306e17897e425ad7fb99
rickhanlonii
pushed a commit
that referenced
this pull request
Oct 6, 2022
… tree (#24967) * Change OffscreenInstance isHidden to bitmask The isHidden field of OffscreenInstance is a boolean that represents whether the tree is currently hidden. To implement resuable effects, we need to also track whether the passive effects are currently connected. So I've changed this field to a bitmask. No other behavior has changed in this commit. I'll update the effects behavior in the following steps. * Extract passive mount effects to separate functions I'm about to add a "reappear passive effects" function that will share much of the same code as commitPassiveMountEffectOnFiber. To minimize the duplicated code, I've extracted the shared parts into separate functions, similar to what I did for commitLayoutEffectOnFiber and reappearLayoutEffects. This may not save much on code size because Closure will likely inline some of it, anyway, but it makes it harder for the two paths to accidentally diverge. * Don't mount passive effects in a new hidden tree This changes the behavior of Offscreen so that passive effects do not fire when prerendering a brand new tree. Previously, Offscreen did not affect passive effects at all — only layout effects, which mount or unmount whenever the visibility of the tree changes. When hiding an already visible tree, the behavior of passive effects is unchanged, for now; unlike layout effects, the passive effects will not get unmounted. Pre-rendered updates to a hidden tree in this state will also fire normally. This is only temporary, though — the plan is for passive effects to act more like layout effects, and unmount them when the tree is hidden. Perhaps after a delay so that if the visibility toggles quickly back and forth, the effects don't need to remount. I'll implement this separately. * "Atomic" passive commit effects must always fire There are a few cases where commit phase logic always needs to fire even inside a hidden tree. In general, we should try to design algorithms that don't depend on a commit effect running during prerendering, but there's at least one case where I think it makes sense. The experimental Cache component uses reference counting to keep track of the lifetime of a cache instance. This allows us to expose an AbortSignal object that data frameworks can use to cancel aborted requests. These cache objects are considered alive even inside a prerendered tree. To implement this I added an "atomic" passive effect traversal that runs even when a tree is hidden. (As a follow up, we should add a special subtree flag so that we can skip over nodes that don't have them. There are a number of similar subtree flag optimizations that we have planned, so I'll leave them for a later refactor.) The only other feature that currently depends on this behavior is Transition Tracing. I did not add a test for this because Transition Tracing is still in development and doesn't yet work with Offscreen.
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Oct 6, 2022
In facebook#24967, I changed the behavior of Offscreen so that passive effects are not fired when the tree is hidden. I accidentally applied this behavior to the old LegacyHidden API, too, which is a deprecated internal-only type that www has been using while they wait for Offscreen to be ready. This fixes LegacyHidden so that the effects do not get deferred, like before. The new behavior still remains in the Offscreen API, which is experimental and not currently in use in www.
poteto
pushed a commit
that referenced
this pull request
Oct 6, 2022
In #24967, I changed the behavior of Offscreen so that passive effects are not fired when the tree is hidden. I accidentally applied this behavior to the old LegacyHidden API, too, which is a deprecated internal-only type that www has been using while they wait for Offscreen to be ready. This fixes LegacyHidden so that the effects do not get deferred, like before. The new behavior still remains in the Offscreen API, which is experimental and not currently in use in www.
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Oct 6, 2022
In facebook#24967, I changed the behavior of Offscreen so that passive effects are not fired when the tree is hidden. I accidentally applied this behavior to the old LegacyHidden API, too, which is a deprecated internal-only type that www has been using while they wait for Offscreen to be ready. This fixes LegacyHidden so that the effects do not get deferred, like before. The new behavior still remains in the Offscreen API, which is experimental and not currently in use in www.
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Oct 6, 2022
In facebook#24967, I changed the behavior of Offscreen so that passive effects are not fired when the tree is hidden. I accidentally applied this behavior to the old LegacyHidden API, too, which is a deprecated internal-only type that www has been using while they wait for Offscreen to be ready. This fixes LegacyHidden so that the effects do not get deferred, like before. The new behavior still remains in the Offscreen API, which is experimental and not currently in use in www.
acdlite
added a commit
that referenced
this pull request
Oct 6, 2022
In #24967, I changed the behavior of Offscreen so that passive effects are not fired when the tree is hidden. I accidentally applied this behavior to the old LegacyHidden API, too, which is a deprecated internal-only type that www has been using while they wait for Offscreen to be ready. This fixes LegacyHidden so that the effects do not get deferred, like before. The new behavior still remains in the Offscreen API, which is experimental and not currently in use in www.
OlimpiaZurek
pushed a commit
to OlimpiaZurek/react-native
that referenced
this pull request
May 22, 2023
Summary: This sync includes the following changes: - **[4ea064eb0](facebook/react@4ea064eb0 )**: Don't fire passive effects during initial mount of a hidden Offscreen tree ([facebook#24967](facebook/react#24967)) //<Andrew Clark>// - **[2c7dea736](facebook/react@2c7dea736 )**: Implement Offscreen in Fizz ([facebook#24988](facebook/react#24988)) //<Andrew Clark>// - **[49f8254d6](facebook/react@49f8254d6 )**: Bug fix for <App /> vs. <Counter /> ([facebook#24972](facebook/react#24972)) //<davidrenne>// - **[6b28bc9c5](facebook/react@6b28bc9c5 )**: test: Throw custom error instead of relying on runtime error ([facebook#24946](facebook/react#24946)) //<Sebastian Silbermann>// - **[9bd0dd4c1](facebook/react@9bd0dd4c1 )**: test(react-debug-tools): Improve coverage of currentDispatcher.current setter ([facebook#24945](facebook/react#24945)) //<Sebastian Silbermann>// - **[59bc52a16](facebook/react@59bc52a16 )**: Add 4.5.0 release to eslint rules CHANGELOG ([facebook#24853](facebook/react#24853)) //<Sebastian Silbermann>// - **[cfb6cfa25](facebook/react@cfb6cfa25 )**: Reused components commit with timing as new ones //<Andrew Clark>// - **[679eea328](facebook/react@679eea328 )**: Extract layout effects to separate functions //<Andrew Clark>// - **[41287d447](facebook/react@41287d447 )**: Use recursion to traverse during "reappear layout" phase //<Andrew Clark>// - **[697702bf3](facebook/react@697702bf3 )**: Use recursion to traverse during "disappear layout" phase //<Andrew Clark>// - **[02206099a](facebook/react@02206099a )**: Use recursion to traverse during passive unmount phase ([facebook#24918](facebook/react#24918)) //<Andrew Clark>// - **[f62949519](facebook/react@f62949519 )**: [Transition Tracing] Rename transitionCallbacks to unstable_transitionCallbacks ([facebook#24920](facebook/react#24920)) //<Luna Ruan>// - **[7a4336c40](facebook/react@7a4336c40 )**: Use recursion to traverse during passive mount phase //<Andrew Clark>// - **[bb1357b38](facebook/react@bb1357b38 )**: Wrap try-catch directly around each user function //<Andrew Clark>// - **[de3c06984](facebook/react@de3c06984 )**: Move flag check into each switch case //<Andrew Clark>// - **[f5916d15b](facebook/react@f5916d15b )**: [Transition Tracing][Code Cleanup] Delete Marker Name Change Tests ([facebook#24908](facebook/react#24908)) //<Luna Ruan>// - **[fa20b319f](facebook/react@fa20b319f )**: [Transition Tracing] Code Cleanup ([facebook#24880](facebook/react#24880)) //<Luna Ruan>// - **[5e8c1961c](facebook/react@5e8c1961c )**: [Transition Tracing] onMarkerProgress ([facebook#24861](facebook/react#24861)) //<Luna Ruan>// - **[b641d0209](facebook/react@b641d0209 )**: Use recursion to traverse during layout phase //<Andrew Clark>// - **[a1b1e391e](facebook/react@a1b1e391e )**: Wrap try-catch directly around each user function //<Andrew Clark>// - **[3df7e8f5d](facebook/react@3df7e8f5d )**: Move flag check into each switch case //<Andrew Clark>// - **[b8c96b136](facebook/react@b8c96b136 )**: Move ref commit effects inside switch statement //<Andrew Clark>// - **[e225fa43a](facebook/react@e225fa43a )**: [Transition Tracing] Don't call transition callbacks if no transition name specified ([facebook#24887](facebook/react#24887)) //<Luna Ruan>// - **[dd2d65227](facebook/react@dd2d65227 )**: [Transition Tracing] Tracing Marker Name Change in Update Warning ([facebook#24873](facebook/react#24873)) //<Luna Ruan>// - **[80208e769](facebook/react@80208e769 )**: [Transition Tracing] Add onTransitionProgress Callback ([facebook#24833](facebook/react#24833)) //<Luna Ruan>// - **[30eb267ab](facebook/react@30eb267ab )**: Land forked reconciler changes ([facebook#24878](facebook/react#24878)) //<Andrew Clark>// - **[5e4e2dae0](facebook/react@5e4e2dae0 )**: Defer setState callbacks until component is visible ([facebook#24872](facebook/react#24872)) //<Andrew Clark>// - **[8e35b5060](facebook/react@8e35b5060 )**: [Transition Tracing] Refactor Code to Remove OffscreeInstance TODOs ([facebook#24855](facebook/react#24855)) //<Luna Ruan>// - **[deab1263a](facebook/react@deab1263a )**: [Transition Tracing] Change Transition Type Passed Pending Transitions ([facebook#24856](facebook/react#24856)) //<Luna Ruan>// - **[82e9e9909](facebook/react@82e9e9909 )**: Suspending inside a hidden tree should not cause fallbacks to appear ([facebook#24699](facebook/react#24699)) //<Andrew Clark>// Changelog: [General][Changed] - React Native sync for revisions c1f5884...4ea064e jest_e2e[run_all_tests] Reviewed By: philIip, NickGerleman Differential Revision: D39305648 fbshipit-source-id: 627ead5035c77fbc902b306e17897e425ad7fb99
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
(You can review commit-by-commit. Pretend the commits are a stack of PRs, please.)
This changes the behavior of Offscreen so that passive effects do not fire when prerendering a brand new tree. Previously, Offscreen did not affect passive effects at all — only layout effects, which mount or unmount whenever the visibility of the tree changes.
When hiding an already visible tree, the behavior of passive effects is unchanged, for now; unlike layout effects, the passive effects will not get unmounted. Pre-rendered updates to a hidden tree in this state will also fire normally. This is only temporary, though — the plan is for passive effects to act more like layout effects, and unmount them when the tree is hidden. Perhaps after a delay so that if the visibility toggles quickly back and forth, the effects don't need to remount. I'll implement this separately.