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

feat: Add useHydrateableEffect #17350

Closed
wants to merge 2 commits into from

Conversation

eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Nov 12, 2019

This is an attempt to resolve #14927

Rationale

If the component requires a layout effect no current workaround solves the underlying issue. Explicit fallback views are most likely impossible (that's why we need layout in the first place) or the component itself is a sufficient fallback (e.g. the overall markup is renderable on the server but we need to adjust some minor visuals).

Since components using useLayoutEffect will always have an inconsistent UI before hydration we can potentially downgrade these effects to passive effects i.e. it's already inconsistent so we might as well make it inconsistent a little bit longer to make room for higher priority work.

Behavior

  • like useEffect when ssr
  • like useEffect when hydrating
  • like useLayoutEffect when rendering on the client
  • like useLayoutEffect on updates

@@ -1337,6 +1337,7 @@ function getReactiveHookCallbackIndex(calleeNode, options) {
switch (node.name) {
case 'useEffect':
case 'useLayoutEffect':
case 'useHydrateableEffect':
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Not so sure about the naming. We don't really hydrate an effect since it those are never executed on the server anyway. I only used hydration in the name to communicate that the behavior of the hook is tied to hydration.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 12, 2019

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 9e45e76:

Sandbox Source
competent-burnell-qt030 Configuration
Example using useLayoutEffect Issue #14927

@sizebot
Copy link

sizebot commented Nov 12, 2019

Details of bundled changes.

Comparing: cf00812...9e45e76

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-test-renderer.development.js +0.3% +0.1% 622.89 KB 624.57 KB 131.48 KB 131.59 KB UMD_DEV
react-test-renderer.production.min.js 🔺+0.2% 🔺+0.2% 71.93 KB 72.07 KB 21.94 KB 21.99 KB UMD_PROD
react-test-renderer-shallow.development.js +0.1% +0.1% 37.89 KB 37.92 KB 9.84 KB 9.85 KB UMD_DEV
react-test-renderer-shallow.production.min.js 🔺+0.2% 🔺+0.3% 11.66 KB 11.68 KB 3.6 KB 3.61 KB UMD_PROD
react-test-renderer-shallow.development.js +0.1% +0.1% 32.43 KB 32.46 KB 8.53 KB 8.54 KB NODE_DEV
react-test-renderer-shallow.production.min.js 🔺+0.2% 🔺+0.3% 11.79 KB 11.82 KB 3.71 KB 3.72 KB NODE_PROD
react-test-renderer.development.js +0.3% +0.1% 618.15 KB 619.83 KB 130.3 KB 130.41 KB NODE_DEV
react-test-renderer.production.min.js 🔺+0.2% 🔺+0.2% 71.63 KB 71.77 KB 21.56 KB 21.61 KB NODE_PROD
ReactShallowRenderer-dev.js +0.1% +0.1% 34.43 KB 34.47 KB 8.49 KB 8.5 KB FB_WWW_DEV
ReactTestRenderer-dev.js +0.3% +0.1% 633.98 KB 635.65 KB 131.12 KB 131.21 KB FB_WWW_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% 750.92 KB 752.6 KB 157.91 KB 158.02 KB RN_OSS_DEV
ReactFabric-dev.js +0.2% +0.1% 741.54 KB 743.21 KB 155.71 KB 155.81 KB RN_OSS_DEV
ReactNativeRenderer-dev.js +0.2% +0.1% 751.1 KB 752.77 KB 158.01 KB 158.11 KB RN_FB_DEV
ReactFabric-prod.js 🔺+0.1% 🔺+0.1% 266.81 KB 267.13 KB 45.77 KB 45.83 KB RN_OSS_PROD
ReactNativeRenderer-prod.js 🔺+0.1% 🔺+0.1% 274.78 KB 275.1 KB 47.1 KB 47.17 KB RN_FB_PROD
ReactFabric-profiling.js +0.1% +0.1% 277.97 KB 278.29 KB 47.9 KB 47.97 KB RN_OSS_PROFILING
ReactNativeRenderer-profiling.js +0.1% +0.1% 285.98 KB 286.3 KB 49.25 KB 49.32 KB RN_FB_PROFILING
ReactNativeRenderer-prod.js 🔺+0.1% 🔺+0.1% 274.39 KB 274.71 KB 47.03 KB 47.1 KB RN_OSS_PROD
ReactFabric-dev.js +0.2% +0.1% 741.72 KB 743.4 KB 155.79 KB 155.89 KB RN_FB_DEV
ReactNativeRenderer-profiling.js +0.1% +0.1% 285.59 KB 285.92 KB 49.18 KB 49.25 KB RN_OSS_PROFILING
ReactFabric-prod.js 🔺+0.1% 🔺+0.1% 267.16 KB 267.48 KB 45.84 KB 45.9 KB RN_FB_PROD
ReactFabric-profiling.js +0.1% +0.1% 278.31 KB 278.64 KB 47.97 KB 48.03 KB RN_FB_PROFILING

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactART-dev.js +0.3% +0.1% 622.3 KB 623.97 KB 128.56 KB 128.66 KB FB_WWW_DEV
ReactART-prod.js 🔺+0.1% 🔺+0.2% 236.29 KB 236.62 KB 39.8 KB 39.87 KB FB_WWW_PROD
react-art.development.js +0.2% +0.1% 678.11 KB 679.79 KB 145.94 KB 146.05 KB UMD_DEV
react-art.production.min.js 🔺+0.1% 🔺+0.1% 107.32 KB 107.46 KB 32.52 KB 32.56 KB UMD_PROD
react-art.development.js +0.3% +0.1% 608.79 KB 610.47 KB 128.52 KB 128.63 KB NODE_DEV
react-art.production.min.js 🔺+0.2% 🔺+0.2% 72.29 KB 72.42 KB 21.68 KB 21.72 KB NODE_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.0% 123.72 KB 123.85 KB 38.78 KB 38.79 KB NODE_PROFILING
react-dom-server.browser.development.js 0.0% 0.0% 138.9 KB 138.93 KB 36.78 KB 36.79 KB UMD_DEV
react-dom-server.browser.production.min.js 🔺+0.1% -0.1% 20.47 KB 20.49 KB 7.5 KB 7.49 KB UMD_PROD
ReactDOMServer-prod.js 🔺+0.1% 🔺+0.1% 49 KB 49.04 KB 11.19 KB 11.2 KB FB_WWW_PROD
react-dom-test-utils.production.min.js 0.0% 0.0% 11.18 KB 11.18 KB 4.15 KB 4.15 KB UMD_PROD
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.1% 1.21 KB 1.21 KB 710 B 711 B UMD_PROD
react-dom-test-utils.development.js 0.0% 0.0% 53.06 KB 53.06 KB 15.08 KB 15.08 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 🔺+0.1% 10.95 KB 10.95 KB 4.09 KB 4.09 KB NODE_PROD
react-dom.development.js +0.2% +0.1% 958.31 KB 959.99 KB 215.24 KB 215.35 KB UMD_DEV
react-dom.production.min.js 🔺+0.1% 0.0% 119.74 KB 119.88 KB 38.38 KB 38.39 KB UMD_PROD
react-dom.profiling.min.js +0.1% +0.1% 123.47 KB 123.61 KB 39.56 KB 39.61 KB UMD_PROFILING
react-dom.development.js +0.2% +0.1% 952.38 KB 954.06 KB 213.56 KB 213.67 KB NODE_DEV
react-dom-server.node.development.js 0.0% 0.0% 135.95 KB 135.97 KB 35.99 KB 36 KB NODE_DEV
react-dom.production.min.js 🔺+0.1% 0.0% 119.84 KB 119.97 KB 37.65 KB 37.66 KB NODE_PROD
react-dom-server.node.production.min.js 🔺+0.1% 🔺+0.1% 20.8 KB 20.83 KB 7.63 KB 7.64 KB NODE_PROD
react-dom-server.browser.development.js 0.0% 0.0% 134.84 KB 134.87 KB 35.76 KB 35.77 KB NODE_DEV
ReactDOM-dev.js +0.2% +0.1% 979.95 KB 981.57 KB 216.43 KB 216.54 KB FB_WWW_DEV
react-dom-server.browser.production.min.js 🔺+0.1% 🔺+0.1% 20.39 KB 20.42 KB 7.47 KB 7.48 KB NODE_PROD
ReactDOM-prod.js 🔺+0.1% 🔺+0.1% 393.16 KB 393.48 KB 71.82 KB 71.87 KB FB_WWW_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.91 KB 60.91 KB 16.07 KB 16.07 KB UMD_DEV
ReactDOM-profiling.js +0.1% +0.1% 404.49 KB 404.81 KB 73.97 KB 74.01 KB FB_WWW_PROFILING
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.23 KB 10.23 KB 3.47 KB 3.48 KB UMD_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.61 KB 60.61 KB 16 KB 16 KB NODE_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 9.97 KB 9.97 KB 3.37 KB 3.37 KB NODE_PROD
ReactDOMServer-dev.js 0.0% 0.0% 140.24 KB 140.27 KB 35.49 KB 35.5 KB FB_WWW_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.1% 1.21 KB 1.21 KB 697 B 698 B NODE_PROD

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler-persistent.development.js +0.3% +0.1% 606.99 KB 608.67 KB 126.51 KB 126.62 KB NODE_DEV
react-reconciler-persistent.production.min.js 🔺+0.2% 🔺+0.2% 72.53 KB 72.67 KB 21.32 KB 21.37 KB NODE_PROD
react-reconciler-reflection.production.min.js 0.0% 🔺+0.1% 2.86 KB 2.86 KB 1.24 KB 1.24 KB NODE_PROD
react-reconciler.development.js +0.3% +0.1% 609.79 KB 611.47 KB 127.69 KB 127.8 KB NODE_DEV
react-reconciler.production.min.js 🔺+0.2% 🔺+0.2% 75.29 KB 75.42 KB 21.96 KB 22 KB NODE_PROD

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

Size changes (experimental)

Generated by 🚫 dangerJS against 9e45e76

@sizebot
Copy link

sizebot commented Nov 12, 2019

Details of bundled changes.

Comparing: cf00812...9e45e76

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactFabric-dev.js +0.2% +0.1% 741.53 KB 743.2 KB 155.7 KB 155.8 KB RN_OSS_DEV
ReactFabric-prod.js 🔺+0.1% 🔺+0.1% 266.8 KB 267.12 KB 45.77 KB 45.82 KB RN_OSS_PROD
ReactNativeRenderer-dev.js +0.2% +0.1% 750.91 KB 752.58 KB 157.91 KB 158.01 KB RN_OSS_DEV
ReactFabric-profiling.js +0.1% +0.1% 277.96 KB 278.28 KB 47.89 KB 47.96 KB RN_OSS_PROFILING
ReactNativeRenderer-prod.js 🔺+0.1% 🔺+0.1% 274.37 KB 274.7 KB 47.02 KB 47.09 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js +0.1% +0.1% 285.58 KB 285.9 KB 49.17 KB 49.24 KB RN_OSS_PROFILING

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler-persistent.production.min.js 🔺+0.2% 🔺+0.2% 72.52 KB 72.66 KB 21.31 KB 21.36 KB NODE_PROD
react-reconciler.development.js +0.3% +0.1% 609.78 KB 611.46 KB 127.69 KB 127.8 KB NODE_DEV
react-reconciler.production.min.js 🔺+0.2% 🔺+0.2% 72.51 KB 72.65 KB 21.31 KB 21.35 KB NODE_PROD
react-reconciler-reflection.production.min.js 0.0% 🔺+0.1% 2.85 KB 2.85 KB 1.24 KB 1.24 KB NODE_PROD
react-reconciler-persistent.development.js +0.3% +0.1% 606.97 KB 608.65 KB 126.5 KB 126.61 KB NODE_DEV

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom-server.browser.production.min.js 🔺+0.1% 🔺+0.1% 19.94 KB 19.96 KB 7.4 KB 7.4 KB NODE_PROD
react-dom.production.min.js 🔺+0.1% 🔺+0.1% 115.84 KB 115.98 KB 37.26 KB 37.3 KB UMD_PROD
react-dom.profiling.min.js +0.1% +0.1% 119.46 KB 119.6 KB 38.41 KB 38.43 KB UMD_PROFILING
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 9.96 KB 9.96 KB 3.36 KB 3.37 KB NODE_PROD
react-dom.development.js +0.2% +0.1% 952.36 KB 954.04 KB 213.54 KB 213.65 KB NODE_DEV
react-dom.production.min.js 🔺+0.1% -0.0% 115.91 KB 116.05 KB 36.61 KB 36.6 KB NODE_PROD
react-dom.profiling.min.js +0.1% -0.0% 119.68 KB 119.81 KB 37.72 KB 37.71 KB NODE_PROFILING
react-dom-unstable-fizz.browser.development.js 0.0% -0.1% 3.87 KB 3.87 KB 1.54 KB 1.54 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.1% 1.2 KB 1.2 KB 702 B 703 B UMD_PROD
react-dom-server.browser.development.js 0.0% 0.0% 138.88 KB 138.91 KB 36.78 KB 36.79 KB UMD_DEV
react-dom-server.browser.production.min.js 🔺+0.1% 🔺+0.2% 20.01 KB 20.03 KB 7.41 KB 7.42 KB UMD_PROD
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.2% 1.04 KB 1.04 KB 634 B 635 B NODE_PROD
react-dom-test-utils.production.min.js 0.0% 0.0% 11.17 KB 11.17 KB 4.14 KB 4.14 KB UMD_PROD
react-dom-server.browser.development.js 0.0% 0.0% 134.81 KB 134.84 KB 35.76 KB 35.77 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 🔺+0.1% 10.94 KB 10.94 KB 4.08 KB 4.08 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.89 KB 60.89 KB 16.06 KB 16.07 KB UMD_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.1% 1.2 KB 1.2 KB 689 B 690 B NODE_PROD
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.22 KB 10.22 KB 3.47 KB 3.47 KB UMD_PROD
react-dom-server.node.development.js 0.0% 0.0% 135.92 KB 135.95 KB 35.99 KB 36 KB NODE_DEV
react-dom.development.js +0.2% +0.1% 958.29 KB 959.97 KB 215.22 KB 215.33 KB UMD_DEV
react-dom-server.node.production.min.js 🔺+0.1% 🔺+0.1% 20.34 KB 20.37 KB 7.55 KB 7.56 KB NODE_PROD

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.production.min.js 🔺+0.1% 🔺+0.1% 104.77 KB 104.9 KB 31.83 KB 31.85 KB UMD_PROD
react-art.development.js +0.2% +0.1% 678.09 KB 679.77 KB 145.94 KB 146.05 KB UMD_DEV
react-art.development.js +0.3% +0.1% 608.77 KB 610.45 KB 128.52 KB 128.63 KB NODE_DEV
react-art.production.min.js 🔺+0.2% 🔺+0.2% 69.77 KB 69.9 KB 21 KB 21.04 KB NODE_PROD

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-test-renderer-shallow.development.js +0.1% +0.1% 37.88 KB 37.91 KB 9.83 KB 9.84 KB UMD_DEV
react-test-renderer-shallow.production.min.js 🔺+0.2% 🔺+0.3% 11.64 KB 11.67 KB 3.59 KB 3.6 KB UMD_PROD
react-test-renderer-shallow.development.js +0.1% +0.1% 32.42 KB 32.45 KB 8.52 KB 8.53 KB NODE_DEV
react-test-renderer-shallow.production.min.js 🔺+0.2% 🔺+0.3% 11.78 KB 11.8 KB 3.7 KB 3.71 KB NODE_PROD
react-test-renderer.development.js +0.3% +0.1% 622.86 KB 624.54 KB 131.47 KB 131.58 KB UMD_DEV
react-test-renderer.production.min.js 🔺+0.2% 🔺+0.2% 71.91 KB 72.04 KB 21.92 KB 21.97 KB UMD_PROD
react-test-renderer.development.js +0.3% +0.1% 618.13 KB 619.81 KB 130.29 KB 130.4 KB NODE_DEV
react-test-renderer.production.min.js 🔺+0.2% 🔺+0.2% 71.61 KB 71.74 KB 21.54 KB 21.59 KB NODE_PROD

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

Size changes (stable)

Generated by 🚫 dangerJS against 9e45e76

@eps1lon eps1lon force-pushed the feat/useEnhancedEffect branch 2 times, most recently from ad10a1f to e7f2e4b Compare December 2, 2019 15:45
@eps1lon
Copy link
Collaborator Author

eps1lon commented Jan 26, 2020

Closing since the original issue was resolved in #14927 (comment)

@eps1lon eps1lon closed this Jan 26, 2020
@eps1lon eps1lon deleted the feat/useEnhancedEffect branch June 30, 2021 12:15
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.

useLayoutEffect in ssr
3 participants