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

[Transition Tracing] Moved Transition Tracing Callback Code From Mutation to Passive Phase #24251

Merged
merged 1 commit into from
Apr 8, 2022

Conversation

lunaruan
Copy link
Contributor

@lunaruan lunaruan commented Apr 1, 2022

This PR moves the code for transition tracing in the mutation phase that adds transitions to the pending callbacks object (to be called sometime later after paint) from the mutation to the passive phase.

Things to think about:

  1. Passive effects can be flushed before or after paint. How do we make sure that we get the correct end time for the interaction?

@lunaruan lunaruan requested a review from acdlite April 1, 2022 21:01
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Apr 1, 2022
@sizebot
Copy link

sizebot commented Apr 1, 2022

Comparing: 5b2e725...47b4bfa

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 = 131.40 kB 131.40 kB = 41.98 kB 41.98 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 136.45 kB 136.45 kB = 43.43 kB 43.43 kB
facebook-www/ReactDOM-prod.classic.js = 433.07 kB 433.07 kB = 79.60 kB 79.60 kB
facebook-www/ReactDOM-prod.modern.js = 418.07 kB 418.07 kB = 77.24 kB 77.24 kB
facebook-www/ReactDOMForked-prod.classic.js = 433.07 kB 433.07 kB = 79.61 kB 79.61 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 47b4bfa

) {
while (nextEffect !== null) {
const fiber = nextEffect;

if (enableTransitionTracing) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

This code should go in commitPassiveMountOnFiber

if (enableTransitionTracing) {
const transitions = workInProgress.memoizedState.transitions;
if (transitions !== null) {
workInProgress.flags |= Visibility;
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't think this is the right flag. I would use Passive instead.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Also please leave a comment explaining why this flag is being set. It's not obvious from context.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Does passive work here? We would want to know when to run the transition tracing specific code somehow right (ie. when a suspense boundary toggles). If passive is set it doesn't necessarily mean that the suspense boundary has toggled.

@lunaruan lunaruan force-pushed the mutation_to_passive branch from 5f1f52f to 09d1fbb Compare April 7, 2022 16:42
@@ -862,6 +862,14 @@ function completeWork(
}
case HostRoot: {
const fiberRoot = (workInProgress.stateNode: FiberRoot);

if (enableTransitionTracing) {
const transitions = workInProgress.memoizedState.transitions;
Copy link
Collaborator

Choose a reason for hiding this comment

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

We only want to schedule an effect if there was actually a new transition. This will schedule an effect even if nothing changed.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oooh good catch

@@ -918,6 +926,11 @@ function completeWork(
}
updateHostContainer(current, workInProgress);
bubbleProperties(workInProgress);
if (enableTransitionTracing) {
if ((workInProgress.subtreeFlags & Visibility) !== NoFlags) {
workInProgress.flags |= Passive;
Copy link
Collaborator

Choose a reason for hiding this comment

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

What's this for?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If a suspense boundary toggles in visibility, we should also schedule a passive effect even if there are no new transitions because this might mean we completed the interaction (or the pending boundaries array changes at least)

Copy link
Collaborator

Choose a reason for hiding this comment

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

Ok makes sense, thanks for the added inline comment!

@lunaruan lunaruan force-pushed the mutation_to_passive branch from 09d1fbb to 1b56e7d Compare April 7, 2022 23:17
@@ -862,6 +863,17 @@ function completeWork(
}
case HostRoot: {
const fiberRoot = (workInProgress.stateNode: FiberRoot);

if (enableTransitionTracing) {
const transitions = getWorkInProgressTransitions();
Copy link
Collaborator

Choose a reason for hiding this comment

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

Reminder for me: This will change in next PR

@lunaruan lunaruan force-pushed the mutation_to_passive branch from 1b56e7d to 47b4bfa Compare April 8, 2022 16:16
@lunaruan lunaruan merged commit 4ebaeae into facebook:main Apr 8, 2022
rickhanlonii pushed a commit that referenced this pull request Apr 13, 2022
This PR moves the code for transition tracing in the mutation phase that adds transitions to the pending callbacks object (to be called sometime later after paint) from the mutation to the passive phase.

Things to think about:

Passive effects can be flushed before or after paint. How do we make sure that we get the correct end time for the interaction?
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 14, 2022
Summary:
This sync includes the following changes:
- **[8dcedba15](facebook/react@8dcedba15 )**: Add fallback shim for AbortController ([#24285](facebook/react#24285)) //<Ricky>//
- **[b86baa1cb](facebook/react@b86baa1cb )**: Add back lost cache test ([#24317](facebook/react#24317)) //<Ricky>//
- **[bafe912a5](facebook/react@bafe912a5 )**: update types for InputContinuousLane and DefaultLane ([#24316](facebook/react#24316)) //<Leo>//
- **[4ebaeae40](facebook/react@4ebaeae40 )**: moved mutation code to passive ([#24251](facebook/react#24251)) //<Luna Ruan>//
- **[caa60e8fc](facebook/react@caa60e8fc )**: update types for NonIdleLanes and IdleLane ([#24313](facebook/react#24313)) //<Leo>//
- **[1f7a901d7](facebook/react@1f7a901d7 )**: Fix false positive lint error with large number of branches  ([#24287](facebook/react#24287)) //<Stephen Cyron>//
- **[f56dfe950](facebook/react@f56dfe950 )**: Warn on setState() in useInsertionEffect() ([#24298](facebook/react#24298)) //<dan>//
- **[d68b09def](facebook/react@d68b09def )**: Fix warning about setState in useEffect ([#24295](facebook/react#24295)) //<dan>//
- **[057915477](facebook/react@057915477 )**: Update create-subscription README ([#24294](facebook/react#24294)) //<dan>//

Changelog:
[General][Changed] - React Native sync for revisions e8f4a66...8dcedba

jest_e2e[run_all_tests]

Reviewed By: kacieb

Differential Revision: D35581147

fbshipit-source-id: 33661d77eb000fdedab7e506a458fc739eab0056
rickhanlonii pushed a commit that referenced this pull request Apr 14, 2022
This PR moves the code for transition tracing in the mutation phase that adds transitions to the pending callbacks object (to be called sometime later after paint) from the mutation to the passive phase.

Things to think about:

Passive effects can be flushed before or after paint. How do we make sure that we get the correct end time for the interaction?
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
This PR moves the code for transition tracing in the mutation phase that adds transitions to the pending callbacks object (to be called sometime later after paint) from the mutation to the passive phase.

Things to think about:

Passive effects can be flushed before or after paint. How do we make sure that we get the correct end time for the interaction?
Saadnajmi pushed a commit to Saadnajmi/react-native-macos that referenced this pull request Jan 15, 2023
Summary:
This sync includes the following changes:
- **[8dcedba15](facebook/react@8dcedba15 )**: Add fallback shim for AbortController ([facebook#24285](facebook/react#24285)) //<Ricky>//
- **[b86baa1cb](facebook/react@b86baa1cb )**: Add back lost cache test ([facebook#24317](facebook/react#24317)) //<Ricky>//
- **[bafe912a5](facebook/react@bafe912a5 )**: update types for InputContinuousLane and DefaultLane ([facebook#24316](facebook/react#24316)) //<Leo>//
- **[4ebaeae40](facebook/react@4ebaeae40 )**: moved mutation code to passive ([facebook#24251](facebook/react#24251)) //<Luna Ruan>//
- **[caa60e8fc](facebook/react@caa60e8fc )**: update types for NonIdleLanes and IdleLane ([facebook#24313](facebook/react#24313)) //<Leo>//
- **[1f7a901d7](facebook/react@1f7a901d7 )**: Fix false positive lint error with large number of branches  ([facebook#24287](facebook/react#24287)) //<Stephen Cyron>//
- **[f56dfe950](facebook/react@f56dfe950 )**: Warn on setState() in useInsertionEffect() ([facebook#24298](facebook/react#24298)) //<dan>//
- **[d68b09def](facebook/react@d68b09def )**: Fix warning about setState in useEffect ([facebook#24295](facebook/react#24295)) //<dan>//
- **[057915477](facebook/react@057915477 )**: Update create-subscription README ([facebook#24294](facebook/react#24294)) //<dan>//

Changelog:
[General][Changed] - React Native sync for revisions e8f4a66...8dcedba

jest_e2e[run_all_tests]

Reviewed By: kacieb

Differential Revision: D35581147

fbshipit-source-id: 33661d77eb000fdedab7e506a458fc739eab0056
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