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

Implemented Profiler onCommit() and onPostCommit() hooks #17910

Merged
merged 3 commits into from
Mar 5, 2020

Conversation

bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Jan 25, 2020

This PR adds two new callbacks to the Profiler, onCommit and onPostCommit, as proposed in RFC 139 (reactjs/rfcs#139).

  • Implement RFC.
  • Add DevTools hook for capturing passive effect durations.

When reviewing, use the ?w=1 feature flag to ignore whitespace

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 25, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 25, 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 858c870:

Sandbox Source
frosty-frost-b1o9f Configuration

@sizebot
Copy link

sizebot commented Jan 25, 2020

Details of bundled changes.

Comparing: e1c7e65...858c870

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactDOM-profiling.js +0.1% +0.1% 405.88 KB 406.31 KB 73.83 KB 73.9 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% 0.0% 136.57 KB 136.57 KB 34.98 KB 34.98 KB UMD_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.3% 1.17 KB 1.17 KB 675 B 677 B NODE_PROD
react-dom-server.browser.production.min.js 0.0% 0.0% 19.99 KB 19.99 KB 7.4 KB 7.4 KB UMD_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 56.04 KB 56.04 KB 14.53 KB 14.53 KB NODE_DEV
react-dom.development.js +0.1% +0.2% 885.6 KB 886.77 KB 195.2 KB 195.49 KB UMD_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 9.99 KB 9.99 KB 3.38 KB 3.38 KB NODE_PROD
react-dom.production.min.js 0.0% 0.0% 115.85 KB 115.85 KB 37.08 KB 37.08 KB UMD_PROD
react-dom.profiling.min.js +0.1% +0.2% 119.38 KB 119.56 KB 38.28 KB 38.35 KB UMD_PROFILING
react-dom.development.js +0.1% +0.2% 839.19 KB 840.29 KB 191.6 KB 191.89 KB NODE_DEV
react-dom-server.node.development.js 0.0% 0.0% 127.06 KB 127.06 KB 33.83 KB 33.83 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 115.93 KB 115.93 KB 36.45 KB 36.45 KB NODE_PROD
react-dom-server.node.production.min.js 0.0% 0.0% 20.31 KB 20.31 KB 7.52 KB 7.53 KB NODE_PROD
react-dom.profiling.min.js +0.1% +0.1% 119.61 KB 119.79 KB 37.51 KB 37.56 KB NODE_PROFILING
ReactDOM-dev.js +0.1% +0.1% 936.45 KB 937.56 KB 208.25 KB 208.56 KB FB_WWW_DEV
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 3.93 KB 3.93 KB 1.45 KB 1.45 KB NODE_DEV
ReactDOMTesting-dev.js 0.0% 0.0% 895.79 KB 895.93 KB 199.81 KB 199.85 KB FB_WWW_DEV
react-dom-server.browser.development.js 0.0% 0.0% 125.93 KB 125.93 KB 33.61 KB 33.61 KB NODE_DEV
react-dom-test-utils.development.js 0.0% 0.0% 53.68 KB 53.68 KB 14 KB 14 KB UMD_DEV
react-dom-server.browser.production.min.js 0.0% 0.0% 19.9 KB 19.9 KB 7.37 KB 7.37 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.59 KB 3.59 KB 1.36 KB 1.36 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% 0.0% 11.2 KB 11.2 KB 4.15 KB 4.15 KB UMD_PROD
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.3% 1.19 KB 1.19 KB 698 B 700 B UMD_PROD
ReactDOMServer-dev.js 0.0% 0.0% 135.38 KB 135.38 KB 34.44 KB 34.44 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% 0.0% 49.51 KB 49.51 KB 13.54 KB 13.54 KB NODE_DEV
ReactDOMServer-prod.js 0.0% 0.0% 48.8 KB 48.8 KB 11.14 KB 11.14 KB FB_WWW_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.2 KB 3.2 KB 1.29 KB 1.29 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 0.0% 10.96 KB 10.96 KB 4.08 KB 4.08 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 59.07 KB 59.07 KB 14.75 KB 14.75 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.3% 1.02 KB 1.02 KB 620 B 622 B NODE_PROD
react-dom-unstable-native-dependencies.production.min.js 0.0% 🔺+0.1% 10.26 KB 10.26 KB 3.48 KB 3.49 KB UMD_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactFabric-dev.js +0.2% +0.2% 612.93 KB 613.95 KB 132.37 KB 132.65 KB RN_OSS_DEV
ReactNativeRenderer-dev.js +0.2% +0.2% 630.67 KB 631.7 KB 136.52 KB 136.86 KB RN_OSS_DEV
ReactNativeRenderer-prod.js 0.0% 0.0% 260.94 KB 260.94 KB 45.24 KB 45.24 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js +0.2% +0.2% 272.11 KB 272.57 KB 47.37 KB 47.46 KB RN_OSS_PROFILING
ReactFabric-prod.js 0.0% 0.0% 252.89 KB 252.89 KB 43.81 KB 43.81 KB RN_OSS_PROD
ReactFabric-profiling.js +0.2% +0.2% 264.05 KB 264.52 KB 45.95 KB 46.04 KB RN_OSS_PROFILING

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactART-dev.js +0.2% +0.3% 565.6 KB 566.72 KB 118.35 KB 118.65 KB FB_WWW_DEV
ReactART-prod.js 0.0% 0.0% 234.44 KB 234.44 KB 39.76 KB 39.76 KB FB_WWW_PROD
react-art.development.js +0.2% +0.2% 616.83 KB 618 KB 130.26 KB 130.56 KB UMD_DEV
react-art.production.min.js 0.0% 0.0% 104.06 KB 104.06 KB 31.49 KB 31.5 KB UMD_PROD
react-art.development.js +0.2% +0.3% 518.06 KB 519.17 KB 111.54 KB 111.84 KB NODE_DEV
react-art.production.min.js 0.0% 0.0% 69.05 KB 69.05 KB 20.71 KB 20.72 KB NODE_PROD

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-test-renderer-shallow.production.min.js 0.0% 🔺+0.1% 11.75 KB 11.75 KB 3.68 KB 3.68 KB NODE_PROD
ReactTestRenderer-dev.js +0.2% +0.2% 551.8 KB 552.82 KB 116.23 KB 116.52 KB FB_WWW_DEV
react-test-renderer-shallow.development.js 0.0% 0.0% 39.26 KB 39.26 KB 9.85 KB 9.85 KB UMD_DEV
react-test-renderer-shallow.production.min.js 0.0% 0.0% 11.63 KB 11.63 KB 3.59 KB 3.59 KB UMD_PROD
react-test-renderer-shallow.development.js 0.0% 0.0% 32.11 KB 32.11 KB 8.4 KB 8.41 KB NODE_DEV
react-test-renderer.development.js +0.2% +0.3% 554.58 KB 555.73 KB 115.41 KB 115.71 KB UMD_DEV
react-test-renderer.production.min.js 0.0% 0.0% 71.11 KB 71.11 KB 21.61 KB 21.61 KB UMD_PROD
react-test-renderer.development.js +0.2% +0.2% 524.89 KB 525.99 KB 113.08 KB 113.37 KB NODE_DEV
react-test-renderer.production.min.js 0.0% 0.0% 70.92 KB 70.92 KB 21.28 KB 21.28 KB NODE_PROD

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js +0.2% +0.3% 554.36 KB 555.49 KB 117.1 KB 117.4 KB NODE_DEV
react-reconciler-reflection.development.js 0.0% 0.0% 16 KB 16 KB 4.89 KB 4.89 KB NODE_DEV
react-reconciler.production.min.js 0.0% 0.0% 73.47 KB 73.47 KB 21.72 KB 21.72 KB NODE_PROD
react-reconciler-reflection.production.min.js 0.0% 🔺+0.2% 2.8 KB 2.8 KB 1.2 KB 1.2 KB NODE_PROD
react-reconciler-persistent.development.js +0.2% +0.3% 553.04 KB 554.16 KB 116.97 KB 117.26 KB NODE_DEV
react-reconciler-persistent.production.min.js 0.0% 0.0% 73.48 KB 73.48 KB 21.73 KB 21.73 KB NODE_PROD

ReactDOM: size: 0.0%, gzip: 0.0%

Size changes (stable)

Generated by 🚫 dangerJS against 858c870

@sizebot
Copy link

sizebot commented Jan 25, 2020

Details of bundled changes.

Comparing: e1c7e65...858c870

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js +0.2% +0.2% 636.01 KB 637.18 KB 133.68 KB 133.97 KB UMD_DEV
react-art.production.min.js 0.0% 0.0% 106.49 KB 106.49 KB 32.14 KB 32.15 KB UMD_PROD
react-art.development.js +0.2% +0.3% 536.49 KB 537.59 KB 114.99 KB 115.28 KB NODE_DEV
react-art.production.min.js 0.0% 0.0% 71.42 KB 71.42 KB 21.36 KB 21.37 KB NODE_PROD
ReactART-dev.js +0.2% +0.3% 539.01 KB 540.12 KB 112.86 KB 113.17 KB FB_WWW_DEV
ReactART-prod.js 0.0% 0.0% 227.26 KB 227.26 KB 38.49 KB 38.5 KB FB_WWW_PROD

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.profiling.min.js +0.1% +0.1% 123.7 KB 123.87 KB 38.58 KB 38.62 KB NODE_PROFILING
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 59.08 KB 59.08 KB 14.75 KB 14.76 KB UMD_DEV
ReactDOM-dev.js +0.1% +0.2% 894.37 KB 895.48 KB 199.61 KB 199.92 KB FB_WWW_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 🔺+0.1% 10.28 KB 10.28 KB 3.49 KB 3.49 KB UMD_PROD
ReactDOMServer-dev.js 0.0% 0.0% 134.46 KB 134.46 KB 34.28 KB 34.28 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% 0.0% 53.69 KB 53.69 KB 14.01 KB 14.01 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% 0.0% 11.22 KB 11.22 KB 4.16 KB 4.16 KB UMD_PROD
ReactDOMTesting-dev.js 0.0% 0.0% 869.57 KB 869.71 KB 194.5 KB 194.53 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% 0.0% 49.52 KB 49.52 KB 13.55 KB 13.55 KB NODE_DEV
react-dom-server.node.development.js 0.0% 0.0% 128.57 KB 128.57 KB 34.05 KB 34.06 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 0.0% 10.97 KB 10.97 KB 4.09 KB 4.09 KB NODE_PROD
react-dom-server.node.production.min.js 0.0% 0.0% 20.77 KB 20.77 KB 7.6 KB 7.61 KB NODE_PROD
react-dom.development.js +0.1% +0.2% 914.29 KB 915.46 KB 200.19 KB 200.5 KB UMD_DEV
react-dom-server.browser.development.js 0.0% 0.0% 138.15 KB 138.15 KB 35.19 KB 35.19 KB UMD_DEV
react-dom.production.min.js 0.0% 0.0% 119.75 KB 119.75 KB 38.22 KB 38.22 KB UMD_PROD
react-dom-server.browser.production.min.js 0.0% 0.0% 20.45 KB 20.45 KB 7.49 KB 7.49 KB UMD_PROD
react-dom.profiling.min.js +0.1% +0.2% 123.4 KB 123.58 KB 39.38 KB 39.45 KB UMD_PROFILING
react-dom.development.js +0.1% +0.2% 866.69 KB 867.79 KB 196.52 KB 196.83 KB NODE_DEV
react-dom-server.browser.development.js 0.0% 0.0% 127.45 KB 127.45 KB 33.83 KB 33.83 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 119.9 KB 119.9 KB 37.45 KB 37.45 KB NODE_PROD
react-dom-server.browser.production.min.js 0.0% 0.0% 20.36 KB 20.36 KB 7.45 KB 7.45 KB NODE_PROD
ReactDOMServer-prod.js 0.0% 0.0% 48.1 KB 48.1 KB 10.99 KB 10.99 KB FB_WWW_PROD
ReactDOM-profiling.js +0.1% +0.1% 381.95 KB 382.38 KB 69.57 KB 69.63 KB FB_WWW_PROFILING
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 56.05 KB 56.05 KB 14.54 KB 14.54 KB NODE_DEV
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 3.94 KB 3.94 KB 1.45 KB 1.46 KB NODE_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10 KB 10 KB 3.38 KB 3.39 KB NODE_PROD
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.3% 1.19 KB 1.19 KB 683 B 685 B NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.61 KB 3.61 KB 1.37 KB 1.37 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.3% 1.2 KB 1.2 KB 706 B 708 B UMD_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.2% 3.21 KB 3.21 KB 1.3 KB 1.3 KB NODE_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.3% 1.03 KB 1.03 KB 628 B 630 B NODE_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-prod.js 0.0% 0.0% 260.95 KB 260.95 KB 45.25 KB 45.25 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js +0.2% +0.2% 272.12 KB 272.58 KB 47.38 KB 47.47 KB RN_OSS_PROFILING
ReactFabric-prod.js 0.0% 0.0% 252.9 KB 252.9 KB 43.82 KB 43.82 KB RN_OSS_PROD
ReactFabric-profiling.js +0.2% +0.2% 264.07 KB 264.53 KB 45.95 KB 46.05 KB RN_OSS_PROFILING
ReactFabric-dev.js +0.2% +0.2% 615.82 KB 616.85 KB 132.76 KB 133.03 KB RN_FB_DEV
ReactFabric-prod.js 0.0% 0.0% 253.25 KB 253.25 KB 43.91 KB 43.91 KB RN_FB_PROD
ReactNativeRenderer-dev.js +0.2% +0.2% 630.69 KB 631.71 KB 136.53 KB 136.86 KB RN_OSS_DEV
ReactFabric-profiling.js +0.2% +0.2% 264.41 KB 264.87 KB 46.03 KB 46.12 KB RN_FB_PROFILING
ReactNativeRenderer-dev.js +0.2% +0.2% 633.66 KB 634.69 KB 136.92 KB 137.25 KB RN_FB_DEV
ReactNativeRenderer-prod.js 0.0% 0.0% 261.34 KB 261.34 KB 45.31 KB 45.31 KB RN_FB_PROD
ReactNativeRenderer-profiling.js +0.2% +0.2% 272.5 KB 272.96 KB 47.44 KB 47.53 KB RN_FB_PROFILING
ReactFabric-dev.js +0.2% +0.2% 612.94 KB 613.97 KB 132.38 KB 132.66 KB RN_OSS_DEV

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactTestRenderer-dev.js +0.2% +0.2% 551.81 KB 552.84 KB 116.23 KB 116.52 KB FB_WWW_DEV
react-test-renderer-shallow.development.js 0.0% 0.0% 39.27 KB 39.27 KB 9.86 KB 9.86 KB UMD_DEV
react-test-renderer-shallow.production.min.js 0.0% 🔺+0.1% 11.65 KB 11.65 KB 3.59 KB 3.6 KB UMD_PROD
react-test-renderer-shallow.development.js 0.0% 0.0% 32.13 KB 32.13 KB 8.41 KB 8.41 KB NODE_DEV
react-test-renderer-shallow.production.min.js 0.0% 🔺+0.1% 11.77 KB 11.77 KB 3.69 KB 3.69 KB NODE_PROD
react-test-renderer.development.js +0.2% +0.3% 554.6 KB 555.76 KB 115.42 KB 115.73 KB UMD_DEV
react-test-renderer.production.min.js 0.0% 0.0% 71.14 KB 71.14 KB 21.62 KB 21.63 KB UMD_PROD
react-test-renderer.development.js +0.2% +0.2% 524.92 KB 526.01 KB 113.1 KB 113.38 KB NODE_DEV
react-test-renderer.production.min.js 0.0% 0.0% 70.95 KB 70.95 KB 21.29 KB 21.3 KB NODE_PROD

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler-persistent.development.js +0.2% +0.3% 553.05 KB 554.17 KB 116.97 KB 117.27 KB NODE_DEV
react-reconciler-reflection.development.js 0.0% 0.0% 16.01 KB 16.01 KB 4.9 KB 4.9 KB NODE_DEV
react-reconciler-persistent.production.min.js 0.0% 0.0% 73.5 KB 73.5 KB 21.73 KB 21.74 KB NODE_PROD
react-reconciler-reflection.production.min.js 0.0% 🔺+0.1% 2.81 KB 2.81 KB 1.21 KB 1.21 KB NODE_PROD
react-reconciler.development.js +0.2% +0.3% 575.12 KB 576.25 KB 121.02 KB 121.33 KB NODE_DEV
react-reconciler.production.min.js 0.0% 0.0% 76.25 KB 76.25 KB 22.4 KB 22.4 KB NODE_PROD

ReactDOM: size: 0.0%, gzip: 🔺+0.1%

Size changes (experimental)

Generated by 🚫 dangerJS against 858c870

@bvaughn
Copy link
Contributor Author

bvaughn commented Jan 31, 2020

I have rebased this on top of PR #17947 to pull in the various passive effect fixes.

Copy link
Collaborator

@sebmarkbage sebmarkbage left a comment

Choose a reason for hiding this comment

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

Could you rebase this on top of master so build bot can run? Just to confirm that this should have no bundle size impact.

@bvaughn
Copy link
Contributor Author

bvaughn commented Feb 12, 2020

Yes. I've been working on this off and on all afternoon. The recent passive effects changes require changing some of the interaction tracing tests (which I'm working on). Should have it ready to review by tomorrow morning.

@bvaughn bvaughn force-pushed the profiler-commit-durations branch from 26157b4 to 470e4ef Compare February 12, 2020 20:46
@bvaughn
Copy link
Contributor Author

bvaughn commented Feb 12, 2020

@sebmarkbage rebase complete.

Changes to the profiler tests look larger than they are, because I replaced all of the onRender callbacks in the interaction-tracing tests with onPostCommit callbacks (to make sure we didn't have any pending interaction traces still waiting to be completed).

I also updated tests to run with the deferred passive effects flag on and off, so be sure to use the ?w=1 query param when looking at the diff.

@bvaughn bvaughn requested a review from sebmarkbage February 12, 2020 20:53
while (parentFiber !== null) {
if (parentFiber.tag === Profiler) {
const parentStateNode = parentFiber.stateNode;
if (parentStateNode !== null) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This check is something that we wouldn't need to do if we eagerly flushed passive destroy functions during unmount.

describe('onRender callback', () => {
beforeEach(() => {
jest.resetModules();
[true, false].forEach(deferPassiveEffectCleanupDuringUnmount => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This method of testing feature flags is controversial. I think it's nice to have the extra coverage, and these tests are already very verbose so the idea of duplicating them is not very appealing- but I don't want to die on this hill. I'll remove this and just test one of the flag settings if that's the team preference.

@bvaughn bvaughn force-pushed the profiler-commit-durations branch from 470e4ef to 7c7c918 Compare February 24, 2020 22:46
@bvaughn
Copy link
Contributor Author

bvaughn commented Feb 24, 2020

FYI @sebmarkbage I've added a new feature flag (off by default) called enableProfilerCommitHooks. The new Profiler APIs are behind this feature flag.

@bvaughn bvaughn force-pushed the profiler-commit-durations branch from 7c7c918 to 858c870 Compare February 26, 2020 17:32
@bvaughn bvaughn merged commit 024a764 into facebook:master Mar 5, 2020
@bvaughn bvaughn deleted the profiler-commit-durations branch March 5, 2020 19:02
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.

6 participants