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

[DevTools] Named hooks #19097

Closed
wants to merge 6 commits into from
Closed

Conversation

bl00mber
Copy link
Contributor

@bl00mber bl00mber commented Jun 8, 2020

#16474

This is the implementation of main proposed solution based on babel DEV-only AST transform, supporting built-in hooks.
If name is the default hook name (i.e. state for setState, reducer for useReducer), the hook is not injected by transform plugin and ignored by devtools.
Three methods of hook name extraction are used: first array item, identifier name, first argument name.

Supports:

  • useState - first array item
  • useReducer - first array item
  • useRef - identifier name
  • useCallback - identifier name
  • useMemo - identifier name
  • useContext - first argument name

Before

named-hooks-before

After

named-hooks-after

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 8, 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 cc31c03:

Sandbox Source
awesome-pare-w4rjc Configuration

@bl00mber bl00mber closed this Jun 8, 2020
@sizebot
Copy link

sizebot commented Jun 8, 2020

Details of bundled changes.

Comparing: 4c7036e...cc31c03

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.1% +0.1% 910.49 KB 911.83 KB 206.22 KB 206.35 KB NODE_DEV
ReactDOMForked-prod.js 0.0% 0.0% 431.61 KB 431.78 KB 77.93 KB 77.94 KB FB_WWW_PROD
react-dom-server.node.development.js 0.0% 0.0% 138.24 KB 138.26 KB 36.58 KB 36.59 KB NODE_DEV
react-dom.production.min.js 🔺+0.1% 0.0% 126.24 KB 126.31 KB 39.38 KB 39.38 KB NODE_PROD
ReactDOMForked-profiling.js 0.0% 0.0% 442.15 KB 442.31 KB 79.67 KB 79.69 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% 0.0% 144.37 KB 144.4 KB 36.78 KB 36.79 KB UMD_DEV
react-dom-server.node.production.min.js 🔺+0.1% 🔺+0.1% 20.68 KB 20.69 KB 7.66 KB 7.67 KB NODE_PROD
ReactDOMTesting-dev.js +0.1% 0.0% 937.64 KB 938.97 KB 209.51 KB 209.61 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% -0.0% 70.09 KB 70.09 KB 19.6 KB 19.6 KB NODE_DEV
ReactDOMTesting-prod.js 0.0% 0.0% 394.66 KB 394.83 KB 73.01 KB 73.03 KB FB_WWW_PROD
react-dom-test-utils.production.min.js 0.0% -0.0% 13.06 KB 13.06 KB 4.81 KB 4.81 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% -0.1% 5.36 KB 5.36 KB 1.81 KB 1.8 KB UMD_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% -0.2% 1.17 KB 1.17 KB 666 B 665 B NODE_PROD
react-dom-unstable-fizz.browser.production.min.js 0.0% -0.1% 1.2 KB 1.2 KB 706 B 705 B UMD_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 4.87 KB 4.87 KB 1.7 KB 1.71 KB NODE_DEV
react-dom.development.js +0.1% 0.0% 956.38 KB 957.8 KB 208.81 KB 208.9 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% -0.2% 1.01 KB 1.01 KB 617 B 616 B NODE_PROD
react-dom.production.min.js 🔺+0.1% 🔺+0.1% 126.04 KB 126.13 KB 40.35 KB 40.37 KB UMD_PROD
react-dom.profiling.min.js +0.1% 0.0% 130.15 KB 130.23 KB 41.57 KB 41.58 KB UMD_PROFILING
ReactDOMForked-dev.js +0.1% 0.0% 1.02 MB 1.02 MB 233.12 KB 233.2 KB FB_WWW_DEV
react-dom.profiling.min.js +0.1% 0.0% 130.48 KB 130.55 KB 40.66 KB 40.68 KB NODE_PROFILING
react-dom-server.browser.production.min.js 🔺+0.1% 🔺+0.1% 20.34 KB 20.35 KB 7.52 KB 7.53 KB UMD_PROD
ReactDOM-dev.js +0.1% 0.0% 1.01 MB 1.02 MB 231 KB 231.1 KB FB_WWW_DEV
ReactDOM-prod.js 0.0% 0.0% 434.3 KB 434.47 KB 76.92 KB 76.94 KB FB_WWW_PROD
react-dom-server.browser.development.js 0.0% 0.0% 136.97 KB 136.99 KB 36.33 KB 36.33 KB NODE_DEV
ReactDOM-profiling.js 0.0% 0.0% 445.77 KB 445.94 KB 78.83 KB 78.84 KB FB_WWW_PROFILING
react-dom-server.browser.production.min.js 🔺+0.1% 0.0% 20.26 KB 20.27 KB 7.51 KB 7.51 KB NODE_PROD
ReactDOMServer-dev.js 0.0% 0.0% 142.63 KB 142.66 KB 36.29 KB 36.3 KB FB_WWW_DEV
ReactDOMServer-prod.js 🔺+0.1% 0.0% 46.58 KB 46.6 KB 10.9 KB 10.91 KB FB_WWW_PROD
react-dom-test-utils.development.js 0.0% -0.0% 75.26 KB 75.26 KB 20.1 KB 20.1 KB UMD_DEV

react-debug-tools

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-debug-tools.development.js +5.6% +3.7% 21.33 KB 22.52 KB 5.88 KB 6.09 KB NODE_DEV
react-debug-tools.production.min.js 🔺+5.9% 🔺+4.3% 5.83 KB 6.17 KB 2.24 KB 2.34 KB NODE_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.2% +0.1% 672.15 KB 673.48 KB 144.11 KB 144.22 KB RN_FB_DEV
ReactFabric-dev.js +0.2% +0.1% 653.39 KB 654.72 KB 139.67 KB 139.77 KB RN_FB_DEV
ReactNativeRenderer-dev.js +0.2% +0.1% 667.67 KB 669 KB 143.43 KB 143.54 KB RN_OSS_DEV
ReactFabric-prod.js 🔺+0.1% 0.0% 266.57 KB 266.74 KB 45.79 KB 45.81 KB RN_FB_PROD
ReactNativeRenderer-prod.js 🔺+0.1% 0.0% 273.5 KB 273.67 KB 47.22 KB 47.23 KB RN_OSS_PROD
ReactFabric-profiling.js +0.1% 0.0% 278.62 KB 278.79 KB 48.08 KB 48.09 KB RN_FB_PROFILING
ReactNativeRenderer-profiling.js +0.1% 0.0% 285.51 KB 285.68 KB 49.5 KB 49.51 KB RN_OSS_PROFILING
ReactNativeRenderer-prod.js 🔺+0.1% 0.0% 273.46 KB 273.63 KB 47.2 KB 47.22 KB RN_FB_PROD
ReactNativeRenderer-profiling.js +0.1% 0.0% 285.46 KB 285.63 KB 49.48 KB 49.49 KB RN_FB_PROFILING
ReactFabric-dev.js +0.2% +0.1% 648.91 KB 650.24 KB 138.95 KB 139.06 KB RN_OSS_DEV
ReactFabric-prod.js 🔺+0.1% 0.0% 266.61 KB 266.78 KB 45.81 KB 45.83 KB RN_OSS_PROD
ReactFabric-profiling.js +0.1% 0.0% 278.66 KB 278.83 KB 48.09 KB 48.11 KB RN_OSS_PROFILING

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactART-prod.js 🔺+0.1% 0.0% 243.12 KB 243.29 KB 41.41 KB 41.43 KB FB_WWW_PROD
react-art.development.js +0.2% +0.1% 672.32 KB 673.73 KB 141.42 KB 141.51 KB UMD_DEV
react-art.production.min.js 🔺+0.1% 0.0% 111.75 KB 111.83 KB 33.88 KB 33.89 KB UMD_PROD
react-art.development.js +0.2% +0.1% 574.91 KB 576.24 KB 123.68 KB 123.78 KB NODE_DEV
react-art.production.min.js 🔺+0.1% 0.0% 76.7 KB 76.77 KB 23 KB 23 KB NODE_PROD
ReactART-dev.js +0.2% +0.1% 607.66 KB 608.99 KB 127.79 KB 127.89 KB FB_WWW_DEV

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.0% 12.74 KB 12.74 KB 3.97 KB 3.97 KB UMD_PROD
react-test-renderer.development.js +0.2% +0.1% 583.15 KB 584.57 KB 121.29 KB 121.37 KB UMD_DEV
react-test-renderer.production.min.js 🔺+0.1% -0.0% 75.4 KB 75.48 KB 22.9 KB 22.89 KB UMD_PROD
react-test-renderer.development.js +0.2% +0.1% 555.96 KB 557.29 KB 119.88 KB 119.99 KB NODE_DEV
react-test-renderer.production.min.js 🔺+0.1% 🔺+0.1% 75.19 KB 75.26 KB 22.62 KB 22.64 KB NODE_PROD
ReactTestRenderer-dev.js +0.2% +0.1% 581.55 KB 582.88 KB 122.99 KB 123.09 KB FB_WWW_DEV
ReactTestRenderer-dev.js +0.2% +0.1% 574.1 KB 575.43 KB 122.76 KB 122.87 KB RN_FB_DEV
react-test-renderer-shallow.development.js 0.0% -0.0% 39.17 KB 39.17 KB 9.58 KB 9.58 KB UMD_DEV

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js +0.2% +0.1% 632.42 KB 633.75 KB 133.73 KB 133.86 KB NODE_DEV
react-reconciler-reflection.development.js 0.0% -0.0% 16.7 KB 16.7 KB 4.98 KB 4.98 KB NODE_DEV
react-reconciler.production.min.js 🔺+0.1% 0.0% 86.54 KB 86.62 KB 25.8 KB 25.81 KB NODE_PROD

react-named-hooks

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-named-hooks.development.js n/a n/a 0 B 1.82 KB 0 B 874 B NODE_DEV
react-named-hooks.production.min.js n/a n/a 0 B 1.11 KB 0 B 692 B NODE_PROD

Size changes (experimental)

Generated by 🚫 dangerJS against cc31c03

@sizebot
Copy link

sizebot commented Jun 8, 2020

Details of bundled changes.

Comparing: 4c7036e...cc31c03

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.2% +0.1% 876.54 KB 877.88 KB 199.59 KB 199.71 KB NODE_DEV
ReactDOMForked-prod.js 0.0% 0.0% 442.8 KB 442.97 KB 79.79 KB 79.81 KB FB_WWW_PROD
react-dom-server.node.development.js 0.0% 0.0% 131.26 KB 131.28 KB 34.83 KB 34.84 KB NODE_DEV
react-dom.production.min.js 🔺+0.1% 0.0% 121.2 KB 121.27 KB 37.9 KB 37.91 KB NODE_PROD
ReactDOMForked-profiling.js 0.0% 0.0% 453.4 KB 453.56 KB 81.56 KB 81.57 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% 0.0% 137.02 KB 137.05 KB 35.02 KB 35.02 KB UMD_DEV
react-dom-server.node.production.min.js 🔺+0.1% 🔺+0.1% 20.22 KB 20.23 KB 7.59 KB 7.59 KB NODE_PROD
react-dom-test-utils.production.min.js 0.0% -0.0% 13.17 KB 13.17 KB 4.89 KB 4.89 KB UMD_PROD
ReactDOMTesting-dev.js +0.1% 0.0% 963.43 KB 964.77 KB 215.05 KB 215.15 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% -0.0% 70.08 KB 70.08 KB 19.59 KB 19.59 KB NODE_DEV
ReactDOMTesting-prod.js 0.0% 0.0% 406.52 KB 406.69 KB 74.9 KB 74.92 KB FB_WWW_PROD
react-dom-test-utils.production.min.js 0.0% -0.0% 13.05 KB 13.05 KB 4.8 KB 4.8 KB NODE_PROD
react-dom.development.js +0.2% 0.0% 920.9 KB 922.32 KB 202.11 KB 202.2 KB UMD_DEV
react-dom.production.min.js 🔺+0.1% 🔺+0.1% 121.09 KB 121.17 KB 38.83 KB 38.85 KB UMD_PROD
react-dom.profiling.min.js +0.1% +0.1% 125.06 KB 125.14 KB 40.09 KB 40.11 KB UMD_PROFILING
ReactDOMForked-dev.js +0.1% 0.0% 1.04 MB 1.04 MB 238.81 KB 238.89 KB FB_WWW_DEV
react-dom.profiling.min.js +0.1% 0.0% 125.3 KB 125.38 KB 39.12 KB 39.13 KB NODE_PROFILING
react-dom-server.browser.production.min.js 🔺+0.1% 🔺+0.1% 19.88 KB 19.9 KB 7.45 KB 7.45 KB UMD_PROD
ReactDOM-dev.js +0.1% 0.0% 1.04 MB 1.04 MB 236.58 KB 236.68 KB FB_WWW_DEV
ReactDOM-prod.js 0.0% 0.0% 445.37 KB 445.54 KB 78.77 KB 78.79 KB FB_WWW_PROD
react-dom-server.browser.development.js 0.0% 0.0% 129.99 KB 130.01 KB 34.58 KB 34.58 KB NODE_DEV
ReactDOM-profiling.js 0.0% 0.0% 456.9 KB 457.07 KB 80.69 KB 80.71 KB FB_WWW_PROFILING
react-dom-server.browser.production.min.js 🔺+0.1% 0.0% 19.8 KB 19.81 KB 7.43 KB 7.43 KB NODE_PROD
ReactDOMServer-dev.js 0.0% 0.0% 146.67 KB 146.69 KB 37.29 KB 37.3 KB FB_WWW_DEV
ReactDOMServer-prod.js 0.0% 0.0% 47.44 KB 47.47 KB 11.11 KB 11.12 KB FB_WWW_PROD
react-dom-test-utils.development.js 0.0% -0.0% 75.25 KB 75.25 KB 20.1 KB 20.09 KB UMD_DEV

react-debug-tools

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-debug-tools.development.js +5.6% +3.7% 21.32 KB 22.51 KB 5.87 KB 6.08 KB NODE_DEV
react-debug-tools.production.min.js 🔺+5.9% 🔺+4.4% 5.81 KB 6.16 KB 2.23 KB 2.33 KB NODE_PROD

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactART-prod.js 🔺+0.1% 0.0% 250.16 KB 250.32 KB 42.67 KB 42.69 KB FB_WWW_PROD
react-art.development.js +0.2% +0.1% 646.31 KB 647.73 KB 136.15 KB 136.25 KB UMD_DEV
react-art.production.min.js 🔺+0.1% -0.0% 108.19 KB 108.27 KB 32.8 KB 32.8 KB UMD_PROD
react-art.development.js +0.2% +0.1% 550 KB 551.33 KB 118.54 KB 118.65 KB NODE_DEV
react-art.production.min.js 🔺+0.1% 🔺+0.1% 73.19 KB 73.26 KB 21.95 KB 21.96 KB NODE_PROD
ReactART-dev.js +0.2% +0.1% 617.67 KB 619 KB 129.77 KB 129.86 KB FB_WWW_DEV

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.0% 12.73 KB 12.73 KB 3.96 KB 3.96 KB UMD_PROD
react-test-renderer.development.js +0.2% +0.1% 583.13 KB 584.54 KB 121.28 KB 121.36 KB UMD_DEV
react-test-renderer.production.min.js 🔺+0.1% -0.0% 75.37 KB 75.45 KB 22.88 KB 22.88 KB UMD_PROD
react-test-renderer.development.js +0.2% +0.1% 555.93 KB 557.27 KB 119.87 KB 119.98 KB NODE_DEV
react-test-renderer.production.min.js 🔺+0.1% 🔺+0.1% 75.16 KB 75.24 KB 22.6 KB 22.62 KB NODE_PROD
ReactTestRenderer-dev.js +0.2% +0.1% 581.54 KB 582.87 KB 122.98 KB 123.09 KB FB_WWW_DEV
ReactTestRenderer-dev.js +0.2% +0.1% 574.09 KB 575.42 KB 122.75 KB 122.87 KB RN_FB_DEV
react-test-renderer-shallow.development.js 0.0% -0.0% 39.16 KB 39.16 KB 9.57 KB 9.57 KB UMD_DEV

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.2% +0.1% 667.66 KB 668.99 KB 143.42 KB 143.53 KB RN_OSS_DEV
ReactNativeRenderer-prod.js 🔺+0.1% 0.0% 273.49 KB 273.66 KB 47.21 KB 47.22 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js +0.1% 0.0% 285.5 KB 285.67 KB 49.49 KB 49.5 KB RN_OSS_PROFILING
ReactFabric-dev.js +0.2% +0.1% 648.89 KB 650.22 KB 138.95 KB 139.05 KB RN_OSS_DEV
ReactFabric-prod.js 🔺+0.1% 0.0% 266.6 KB 266.76 KB 45.8 KB 45.82 KB RN_OSS_PROD
ReactFabric-profiling.js +0.1% 0.0% 278.64 KB 278.81 KB 48.08 KB 48.1 KB RN_OSS_PROFILING

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js +0.2% +0.1% 605.12 KB 606.46 KB 128.12 KB 128.24 KB NODE_DEV
react-reconciler.production.min.js 🔺+0.1% 0.0% 82.61 KB 82.69 KB 24.66 KB 24.66 KB NODE_PROD

react-named-hooks

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-named-hooks.development.js n/a n/a 0 B 1.81 KB 0 B 865 B NODE_DEV
react-named-hooks.production.min.js n/a n/a 0 B 1.1 KB 0 B 684 B NODE_PROD

ReactDOM: size: 0.0%, gzip: -0.0%

Size changes (stable)

Generated by 🚫 dangerJS against cc31c03

@bl00mber bl00mber reopened this Jun 8, 2020
@bl00mber bl00mber force-pushed the devtools/named-hooks branch 5 times, most recently from b97cdfd to 6c16fa8 Compare June 8, 2020 11:12
@gaearon
Copy link
Collaborator

gaearon commented Jul 22, 2020

Sorry we haven't gotten around to reviewing yet. This will be important to get back to but we haven't prioritized it yet.

@stale
Copy link

stale bot commented Dec 25, 2020

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Dec 25, 2020
@eps1lon
Copy link
Collaborator

eps1lon commented Dec 26, 2020

Bump

@stale stale bot removed the Resolution: Stale Automatically closed due to inactivity label Dec 26, 2020
@bl00mber
Copy link
Contributor Author

bl00mber commented Apr 5, 2021

@bvaughn

@bvaughn
Copy link
Contributor

bvaughn commented Apr 5, 2021

Thanks for the PR!

I'm not ready to dig into this yet, although I think this is probably more of the direction we'll end up heading with this feature, (once we have the bandwidth to land the change and test it and roll it out):
MLH-Fellowship#115

It's more complicated but it "just works" without adding bytes to the bundle or requiring changes be made to existing apps.

@bvaughn
Copy link
Contributor

bvaughn commented Jul 15, 2021

Thank you for this PR!

We ended up going with another solution for this: #21641

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants