[Transition Tracing] onMarkerIncomplete - Tracing Marker/Suspense Boundary Deletions by lunaruan · Pull Request #24885 · facebook/react

lunaruan · 2022-07-11T18:51:02Z

This PR adds the onMarkerIncomplete callback for tracing marker name changes. Specifically, this PR:

Adds the onMarkerIncomplete callback
When a tracing marker is deleted, call onMarkerIncomplete with the name of the tracing marker for the tracing marker.
When a tracing marker/suspense boundary is deleted, call onMarkerIncomplete for every parent tracing marker with the name of the tracing marker that caused the transition to be incomplete.
Don't call onTransitionComplete or onMarkerComplete when onMarkerIncomplete is called for all tracing markers with the same transitions, but continue to call onTransitionProgress

sizebot · 2022-07-11T18:56:29Z

Comparing: 19e9a4c...0cbae60

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	=	134.28 kB	134.28 kB	=	42.94 kB	42.94 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	140.35 kB	140.35 kB	=	44.74 kB	44.74 kB
facebook-www/ReactDOM-prod.classic.js	+1.59%	474.44 kB	481.96 kB	+1.21%	84.88 kB	85.90 kB
facebook-www/ReactDOM-prod.modern.js	+1.64%	459.68 kB	467.21 kB	+1.22%	82.63 kB	83.64 kB
facebook-www/ReactDOMForked-prod.classic.js	+1.59%	474.44 kB	481.96 kB	+1.21%	84.88 kB	85.90 kB
facebook-www/ReactART-prod.modern.js	+2.48%	303.09 kB	310.61 kB	+1.93%	52.20 kB	53.21 kB
facebook-www/ReactART-prod.classic.js	+2.40%	313.92 kB	321.45 kB	+1.86%	54.03 kB	55.04 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
facebook-www/ReactART-prod.modern.js	+2.48%	303.09 kB	310.61 kB	+1.93%	52.20 kB	53.21 kB
facebook-www/ReactART-prod.classic.js	+2.40%	313.92 kB	321.45 kB	+1.86%	54.03 kB	55.04 kB
facebook-www/ReactDOM-prod.modern.js	+1.64%	459.68 kB	467.21 kB	+1.22%	82.63 kB	83.64 kB
facebook-www/ReactDOMForked-prod.modern.js	+1.64%	459.68 kB	467.21 kB	+1.23%	82.63 kB	83.64 kB
facebook-www/ReactDOM-prod.classic.js	+1.59%	474.44 kB	481.96 kB	+1.21%	84.88 kB	85.90 kB
facebook-www/ReactDOMForked-prod.classic.js	+1.59%	474.44 kB	481.96 kB	+1.21%	84.88 kB	85.90 kB
facebook-www/ReactDOM-profiling.modern.js	+1.54%	489.52 kB	497.05 kB	+1.27%	87.01 kB	88.11 kB
facebook-www/ReactDOMForked-profiling.modern.js	+1.54%	489.52 kB	497.05 kB	+1.27%	87.01 kB	88.11 kB
facebook-www/ReactDOM-profiling.classic.js	+1.49%	504.35 kB	511.87 kB	+1.26%	89.32 kB	90.44 kB
facebook-www/ReactDOMForked-profiling.classic.js	+1.49%	504.35 kB	511.87 kB	+1.26%	89.32 kB	90.45 kB
facebook-www/ReactART-dev.modern.js	+1.07%	822.65 kB	831.42 kB	+0.86%	173.40 kB	174.89 kB
facebook-www/ReactART-dev.classic.js	+1.05%	832.87 kB	841.64 kB	+0.85%	175.49 kB	176.98 kB
facebook-www/ReactDOMForked-dev.modern.js	+0.73%	1,194.26 kB	1,203.03 kB	+0.58%	261.37 kB	262.88 kB
facebook-www/ReactDOM-dev.modern.js	+0.73%	1,194.26 kB	1,203.03 kB	+0.58%	261.37 kB	262.88 kB
facebook-www/ReactDOMForked-dev.classic.js	+0.72%	1,217.87 kB	1,226.64 kB	+0.56%	265.84 kB	267.33 kB
facebook-www/ReactDOM-dev.classic.js	+0.72%	1,217.87 kB	1,226.65 kB	+0.56%	265.84 kB	267.33 kB

Generated by 🚫 dangerJS against 0cbae60

acdlite · 2022-08-08T15:14:45Z

packages/react-reconciler/src/ReactFiberBeginWork.old.js

How would that happen

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

acdlite · 2022-08-08T15:28:55Z

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

Why does this deletions array exist? Why can't we schedule onMarkerIncomplete directly from the deletion effect?

acdlite · 2022-08-08T15:29:11Z

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

Seems like a waste of a field, can use return path

lunaruan · 2022-08-08T15:46:15Z

packages/react-reconciler/src/ReactFiberCommitWork.old.js

Remove this probably

acdlite · 2022-08-11T02:16:40Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

Why are you converting this to an array? Seems like the only thing you're doing is iterating over it

In fact, isn't it an array already? Array.from does a copy, which is unnecessary in this case and generally something to try to avoid.

It's a set actually but I'm just going to use forEach to loop over it since there's probably max a couple of entries

packages/react-reconciler/src/ReactFiber.old.js

acdlite · 2022-08-11T02:20:49Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

This can be hoisted outside of the loop. Also make the name more specific since there's a marker instance variable below, too.

The type should also be refined. What kind of instance is it?

acdlite · 2022-08-11T02:24:09Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

If you do a normal for loop, you can put all this code inside the loop and then break out of it once you find a match. We tend to prefer that when possible instead of the functional array methods.

We can't because transitions is a set

acdlite · 2022-08-11T02:24:59Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

You can get this from the fiber prop

acdlite · 2022-08-18T15:08:33Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

Nit: Add type annotation

lunaruan · 2022-08-18T15:10:02Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

Comment what's going on here

lunaruan · 2022-08-18T15:12:08Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

+          });
+
+          if (abortMarker) {
+            if (markerInstance.aborts === null) {


Move this into the forEach.

Extract this logic to abortTransitionMarker

lunaruan · 2022-08-18T15:28:07Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

Explain what this is doing

'finding all pending markers waiting on suspense boundary and cancels them etc.'

lunaruan · 2022-08-18T15:30:52Z

packages/react-reconciler/src/ReactFiberCommitWork.old.js

Move this to the suspense boundary code

lunaruan · 2022-08-18T15:41:42Z

packages/react-reconciler/src/ReactFiberCommitWork.old.js

Can we move all this code to the Suspense offscreen instance instead of scheduling a passive effect on the tracing marker?

lunaruan · 2022-08-18T15:49:14Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js


    commitTransitionProgress(finishedWork);
+
+    if (!isHidden) {


Add a comment here TODO this will be in an else branch

acdlite · 2022-08-18T15:52:32Z

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js

Nit: inline

lunaruan · 2022-08-22T16:30:28Z

packages/react-reconciler/src/ReactFiberBeginWork.new.js

      };
      workInProgress.stateNode = markerInstance;
+
+      workInProgress.flags |= Passive;


Commet this

lunaruan · 2022-08-22T16:31:19Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

deletedInstance

lunaruan · 2022-08-22T16:32:39Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

We don't need to call this if abort isn't null

lunaruan · 2022-08-22T16:51:11Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

Do you need this maybe return = null.

Split in two.

lunaruan · 2022-08-22T16:52:38Z

packages/react-reconciler/src/ReactFiberCommitWork.new.js

                  pendingBoundaries,
                );
+
+                if (pendingBoundaries.size === 0) {


Commet nothing's waiting

* 'main' of ssh://github.com/GrinZero/react: (26 commits) [devtools][easy] Fix flow type (facebook#25147) Remove Symbol Polyfill (again) (facebook#25144) Remove ReactFiberFlags MountLayoutDev and MountPassiveDev (facebook#25091) experimental_use(promise) (facebook#25084) [Transition Tracing] onMarkerIncomplete - Tracing Marker/Suspense Boundary Deletions (facebook#24885) [Flight] Add support for Webpack Async Modules (facebook#25138) Fix typo: supportsMicrotask -> supportsMicrotasks (facebook#25142) Allow functions to be used as module references (facebook#25137) Test the node-register hooks in unit tests (facebook#25132) Return closestInstance in `getInspectorDataForViewAtPoint` (facebook#25118) [DevTools] Highlight RN elements on hover (facebook#25106) Update fixtures/flight to webpack 5 (facebook#25115) Align StrictMode behaviour with production (facebook#25049) Scaffolding for useMemoCache hook (facebook#25123) devtools: Fix typo from directores to directories (facebook#25124) fixture: Fix typo from perfomrance to performance (facebook#25100) [DevTools] Add events necessary for click to inspect on RN (facebook#25111) Add missing createServerContext for experimental shared subset (facebook#25114) support subresource integrity for bootstrapScripts and bootstrapModules (facebook#25104) make preamble and postamble types explicit and fix typo (facebook#25102) ...

Summary: This sync includes the following changes: - **[c28f313](facebook/react@c28f313e6 )**: experimental_use(promise) for SSR ([#25214](facebook/react#25214)) //<Andrew Clark>// - **[d6f9628](facebook/react@d6f9628a8 )**: Remove some RSC subset entry points that were removed in the main entry point ([#25209](facebook/react#25209)) //<Sebastian Markbåge>// - **[a473d08](facebook/react@a473d08fc )**: Update to Flow from 0.97 to 0.122 ([#25204](facebook/react#25204)) //<Jan Kassens>// - **[7028ce7](facebook/react@7028ce745 )**: experimental_use(promise) for Server Components ([#25207](facebook/react#25207)) //<Andrew Clark>// - **[bfb6568](facebook/react@bfb65681e )**: experimental_use(context)([#25202](facebook/react#25202)) //<mofeiZ>// - **[f0efa11](facebook/react@f0efa1164 )**: [flow] remove custom suppress comment config ([#25170](facebook/react#25170)) //<Jan Kassens>// - **[2e7f422](facebook/react@2e7f422fe )**: Refactor: its type is Container ([#25153](facebook/react#25153)) //<bubucuo>// - **[2c2d9a1](facebook/react@2c2d9a1df )**: [eslint-plugin-react-hooks] only allow capitalized component names ([#25162](facebook/react#25162)) //<Jan Kassens>// - **[36c908a](facebook/react@36c908a6c )**: Don't use the Flight terminology in public error messages ([#25166](facebook/react#25166)) //<Sebastian Markbåge>// - **[8d1b057](facebook/react@8d1b057ec )**: [Flight] Minor error handling fixes ([#25151](facebook/react#25151)) //<Sebastian Markbåge>// - **[9ff738f](facebook/react@9ff738f53 )**: [devtools][easy] Fix flow type ([#25147](facebook/react#25147)) //<Tianyu Yao>// - **[0de3ddf](facebook/react@0de3ddf56 )**: Remove Symbol Polyfill (again) ([#25144](facebook/react#25144)) //<Ricky>// - **[b36f722](facebook/react@b36f72235 )**: Remove ReactFiberFlags MountLayoutDev and MountPassiveDev ([#25091](facebook/react#25091)) //<Samuel Susla>// - **[b6978bc](facebook/react@b6978bc38 )**: experimental_use(promise) ([#25084](facebook/react#25084)) //<Andrew Clark>// - **[11ed701](facebook/react@11ed7010c )**: [Transition Tracing] onMarkerIncomplete - Tracing Marker/Suspense Boundary Deletions ([#24885](facebook/react#24885)) //<Luna Ruan>// - **[b798942](facebook/react@b79894259 )**: [Flight] Add support for Webpack Async Modules ([#25138](facebook/react#25138)) //<Sebastian Markbåge>// - **[c8b778b](facebook/react@c8b778b7f )**: Fix typo: supportsMicrotask -> supportsMicrotasks ([#25142](facebook/react#25142)) //<kwzr>// - **[d0f3966](facebook/react@d0f396651 )**: Allow functions to be used as module references ([#25137](facebook/react#25137)) //<Sebastian Markbåge>// - **[38c5d8a](facebook/react@38c5d8a03 )**: Test the node-register hooks in unit tests ([#25132](facebook/react#25132)) //<Sebastian Markbåge>// - **[3f70e68](facebook/react@3f70e68ce )**: Return closestInstance in `getInspectorDataForViewAtPoint` ([#25118](facebook/react#25118)) //<Tianyu Yao>// - **[3d443ca](facebook/react@3d443cad7 )**: Update fixtures/flight to webpack 5 ([#25115](facebook/react#25115)) //<Tim Neutkens>// - **[5d1ce65](facebook/react@5d1ce6513 )**: Align StrictMode behaviour with production ([#25049](facebook/react#25049)) //<Samuel Susla>// - **[9e67e7a](facebook/react@9e67e7a31 )**: Scaffolding for useMemoCache hook ([#25123](facebook/react#25123)) //<Joseph Savona>// - **[19e9a4c](facebook/react@19e9a4c68 )**: Add missing createServerContext for experimental shared subset ([#25114](facebook/react#25114)) //<Jiachi Liu>// - **[6ef466c](facebook/react@6ef466c68 )**: make preamble and postamble types explicit and fix typo ([#25102](facebook/react#25102)) //<Josh Story>// - **[796d318](facebook/react@796d31809 )**: Implement basic stylesheet Resources for react-dom ([#25060](facebook/react#25060)) //<Josh Story>// - **[32baab3](facebook/react@32baab38f )**: [Transition Tracing] Add Tag Field to Marker Instance ([#25085](facebook/react#25085)) //<Luna Ruan>// - **[8ef3a7c](facebook/react@8ef3a7c08 )**: Resume immediately pinged fiber without unwinding ([#25074](facebook/react#25074)) //<Andrew Clark>// - **[7bcc687](facebook/react@7bcc68772 )**: Remove argument committedLanes from reappearLayoutEffects and recursivelyTraverseReappearLayoutEffects ([#25080](facebook/react#25080)) //<Samuel Susla>// - **[ca990e9](facebook/react@ca990e9a7 )**: Add API to force Scheduler to yield for macrotask ([#25044](facebook/react#25044)) //<Andrew Clark>// - **[b4204ed](facebook/react@b4204ede6 )**: Clean up unused Deletion flag ([#24992](facebook/react#24992)) //<Andrew Clark>// - **[e193be8](facebook/react@e193be87e )**: [Transition Tracing] Add Offscreen Test ([#25035](facebook/react#25035)) //<Luna Ruan>// - **[9fcaf88](facebook/react@9fcaf88d5 )**: Remove rootContainerInstance from unnecessary places ([#25024](facebook/react#25024)) //<Sebastian Markbåge>// - **[80f3d88](facebook/react@80f3d8819 )**: Mount/unmount passive effects when Offscreen visibility changes ([#24977](facebook/react#24977)) //<Andrew Clark>// Changelog: [General][Changed] - React Native sync for revisions 4ea064e...c28f313 Reviewed By: rickhanlonii Differential Revision: D39384898 fbshipit-source-id: 20b080a53851d6dd9d522c8468dd02aab9ba76db

…ndary Deletions (#24885) This PR adds the `onMarkerIncomplete` callback for tracing marker name changes. Specifically, this PR: * Adds the `onMarkerIncomplete` callback * When a tracing marker is deleted, call `onMarkerIncomplete` with the `name` of the tracing marker for the tracing marker. * When a tracing marker/suspense boundary is deleted, call `onMarkerIncomplete` for every parent tracing marker with the `name` of the tracing marker that caused the transition to be incomplete. * Don't call `onTransitionComplete` or `onMarkerComplete` when `onMarkerIncomplete` is called for all tracing markers with the same transitions, but continue to call `onTransitionProgress`

lunaruan requested a review from acdlite July 11, 2022 18:51

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jul 11, 2022

lunaruan force-pushed the deletions branch 3 times, most recently from d029eed to cf03c77 Compare July 12, 2022 19:59

lunaruan force-pushed the deletions branch from cf03c77 to c6c093a Compare July 19, 2022 18:35

lunaruan force-pushed the deletions branch 2 times, most recently from ddc1ba6 to ee037cb Compare August 5, 2022 18:26

lunaruan changed the title ~~[Transition Tracing] onMarkerIncomplete - Tracing Marker Name Change~~ [Transition Tracing] onMarkerIncomplete - Tracing Marker/Suspense Boundary Deletions Aug 5, 2022

lunaruan force-pushed the deletions branch from ee037cb to c7101a2 Compare August 5, 2022 18:31

acdlite reviewed Aug 8, 2022

View reviewed changes

packages/react-reconciler/src/ReactFiberBeginWork.old.js Outdated

Copy link

Collaborator

acdlite Aug 8, 2022

Choose a reason for hiding this comment

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

How would that happen

acdlite reviewed Aug 8, 2022

View reviewed changes

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js Show resolved Hide resolved

acdlite reviewed Aug 8, 2022

View reviewed changes

lunaruan commented Aug 8, 2022

View reviewed changes

packages/react-reconciler/src/ReactFiberCommitWork.old.js Outdated

Copy link

Contributor Author

lunaruan Aug 8, 2022

Choose a reason for hiding this comment

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

Remove this probably

lunaruan force-pushed the deletions branch 4 times, most recently from 1fc184d to bcd87ff Compare August 9, 2022 00:57

acdlite reviewed Aug 11, 2022

View reviewed changes

packages/react-reconciler/src/ReactFiber.old.js Show resolved Hide resolved

acdlite reviewed Aug 11, 2022

View reviewed changes

lunaruan force-pushed the deletions branch from bcd87ff to 0cdb912 Compare August 11, 2022 20:58

acdlite reviewed Aug 18, 2022

View reviewed changes

lunaruan commented Aug 18, 2022

View reviewed changes

acdlite reviewed Aug 18, 2022

View reviewed changes

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js Outdated

Copy link

Collaborator

acdlite Aug 18, 2022

Choose a reason for hiding this comment

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

Nit: inline

lunaruan reacted with thumbs up emoji

lunaruan added 2 commits August 19, 2022 15:02

transition tracing delete tracing marker

eb54476

suspense boundary deleted

128d2b1

lunaruan force-pushed the deletions branch from 0cdb912 to 505f0c7 Compare August 22, 2022 10:14

lunaruan commented Aug 22, 2022

View reviewed changes

packages/react-reconciler/src/ReactFiberCommitWork.new.js Outdated

Copy link

Contributor Author

lunaruan Aug 22, 2022

Choose a reason for hiding this comment

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

deletedInstance

lunaruan commented Aug 22, 2022

View reviewed changes

packages/react-reconciler/src/ReactFiberCommitWork.new.js Outdated

Copy link

Contributor Author

lunaruan Aug 22, 2022

Choose a reason for hiding this comment

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

We don't need to call this if abort isn't null

lunaruan commented Aug 22, 2022

View reviewed changes

lunaruan force-pushed the deletions branch from 505f0c7 to f145369 Compare August 23, 2022 16:17

acdlite approved these changes Aug 23, 2022

View reviewed changes

lunaruan force-pushed the deletions branch 3 times, most recently from b105975 to b4698c8 Compare August 25, 2022 13:21

Refactor code

ce5c421

lunaruan force-pushed the deletions branch from b4698c8 to c0fcb4c Compare August 25, 2022 15:04

old

e535e80

lunaruan force-pushed the deletions branch from c0fcb4c to e535e80 Compare August 25, 2022 15:26

lint

0cbae60

lunaruan merged commit 11ed701 into facebook:main Aug 25, 2022

Conversation

lunaruan commented Jul 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sizebot commented Jul 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Critical size changes

Significant size changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lunaruan Aug 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lunaruan Aug 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Comments

lunaruan commented Jul 11, 2022 •

edited

Loading

sizebot commented Jul 11, 2022 •

edited

Loading

lunaruan Aug 11, 2022 •

edited

Loading

lunaruan Aug 18, 2022 •

edited

Loading