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

warn if passive effects get queued outside of an act() call. #15763

Merged
merged 6 commits into from
Jun 24, 2019

Conversation

threepointone
Copy link
Contributor

@threepointone threepointone commented May 29, 2019

This adds a warning when effects are queued outside of an act() scope. Please see this diff with whitespace off (add ?w=1 to your url)

While the code itself isn't much (it adds the warning to mountEffect() and updateEffect() in ReactFiberHooks), it does change a lot of our tests. We follow a bad-ish pattern here, which is doing asserts inside act() scopes, but it makes sense for us because we're testing intermediate states, and we're manually flush/yield what we need in these tests.

This commit has one last failing test. Working on it, might reach out to one of you for help.

Please please look closely at the tests I've changed; I went about it with a rough-ish hand, wrapping whatever started warning with act() calls. For bits that seemed a bit hard to wrap with act() without drastically changing the test, I explicitly caught the missing act() warnings with expect(...).toWarnDev([...]) statements.

An important question - Is this worth it? Consider an app built with both classical, and functional components. Assume that the class ones are parents to functional children. As we add hooks and effects to children, tests that used to pass for class components will start failing, meaning people will have to update tests for older components they might not be interested in touching.

@sizebot
Copy link

sizebot commented May 29, 2019

Details of bundled changes.

Comparing: 34ce57a...8bcfcc3

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.profiling.min.js 0.0% -0.0% 113.72 KB 113.72 KB 35.87 KB 35.86 KB NODE_PROFILING
react-dom-unstable-native-dependencies.development.js 0.0% -0.0% 60.76 KB 60.76 KB 15.85 KB 15.85 KB UMD_DEV
ReactDOM-dev.js +0.1% 0.0% 917.64 KB 918.86 KB 203.39 KB 203.48 KB FB_WWW_DEV
react-dom-unstable-fire.development.js +0.1% 0.0% 894.41 KB 895.49 KB 203.08 KB 203.15 KB UMD_DEV
react-dom-unstable-fire.production.min.js 0.0% -0.0% 110.23 KB 110.23 KB 35.51 KB 35.51 KB UMD_PROD
react-dom-unstable-fire.profiling.min.js 0.0% -0.0% 113.46 KB 113.46 KB 36.43 KB 36.43 KB UMD_PROFILING
react-dom-unstable-fire.development.js +0.1% 0.0% 888.76 KB 889.84 KB 201.58 KB 201.65 KB NODE_DEV
react-dom-unstable-fire.production.min.js 0.0% -0.0% 110.31 KB 110.31 KB 35.04 KB 35.04 KB NODE_PROD
react-dom.development.js +0.1% 0.0% 894.06 KB 895.14 KB 202.93 KB 203 KB UMD_DEV
react-dom-unstable-fire.profiling.min.js 0.0% -0.0% 113.74 KB 113.74 KB 35.87 KB 35.87 KB NODE_PROFILING
react-dom.production.min.js 0.0% -0.0% 110.22 KB 110.22 KB 35.5 KB 35.5 KB UMD_PROD
ReactFire-dev.js +0.1% 0.0% 916.85 KB 918.07 KB 203.29 KB 203.38 KB FB_WWW_DEV
react-dom-server.browser.production.min.js 0.0% -0.0% 19.45 KB 19.45 KB 7.28 KB 7.28 KB UMD_PROD
react-dom.profiling.min.js 0.0% -0.0% 113.45 KB 113.45 KB 36.42 KB 36.42 KB UMD_PROFILING
react-dom.development.js +0.1% 0.0% 888.42 KB 889.5 KB 201.44 KB 201.51 KB NODE_DEV
react-dom.production.min.js 0.0% -0.0% 110.3 KB 110.3 KB 35.04 KB 35.04 KB NODE_PROD
react-dom-server.browser.production.min.js 0.0% -0.0% 19.38 KB 19.38 KB 7.28 KB 7.28 KB NODE_PROD
ReactDOMServer-prod.js 0.0% -0.0% 48.36 KB 48.36 KB 11.12 KB 11.12 KB FB_WWW_PROD
react-dom-unstable-native-dependencies.development.js 0.0% -0.0% 60.43 KB 60.43 KB 15.72 KB 15.72 KB NODE_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% -0.1% 1.1 KB 1.1 KB 667 B 666 B NODE_PROD
react-dom-unstable-fizz.browser.production.min.js 0.0% -0.1% 1.21 KB 1.21 KB 706 B 705 B UMD_PROD
react-dom-test-utils.development.js 0.0% 0.0% 56.11 KB 56.11 KB 15.55 KB 15.55 KB NODE_DEV

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactART-dev.js +0.2% +0.1% 565.74 KB 566.96 KB 118.17 KB 118.26 KB FB_WWW_DEV
react-art.development.js +0.2% +0.1% 621.94 KB 623.02 KB 136.09 KB 136.16 KB UMD_DEV
react-art.production.min.js 0.0% -0.0% 101.2 KB 101.2 KB 31.04 KB 31.04 KB UMD_PROD
react-art.development.js +0.2% +0.1% 552.88 KB 553.96 KB 118.68 KB 118.75 KB NODE_DEV
react-art.production.min.js 0.0% -0.0% 66.2 KB 66.2 KB 20.32 KB 20.32 KB NODE_PROD
ReactART-prod.js 0.0% -0.0% 216.16 KB 216.16 KB 36.66 KB 36.66 KB FB_WWW_PROD

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-test-renderer.development.js +0.2% +0.1% 566.72 KB 567.81 KB 121.64 KB 121.71 KB UMD_DEV
react-test-renderer.production.min.js 0.0% -0.0% 67.54 KB 67.54 KB 20.76 KB 20.76 KB UMD_PROD
react-test-renderer.development.js +0.2% +0.1% 562.27 KB 563.35 KB 120.49 KB 120.55 KB NODE_DEV
react-test-renderer.production.min.js 0.0% -0.0% 67.26 KB 67.26 KB 20.52 KB 20.52 KB NODE_PROD
ReactTestRenderer-dev.js +0.2% +0.1% 577.31 KB 578.53 KB 120.79 KB 120.88 KB FB_WWW_DEV

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactFabric-dev.js +0.2% +0.1% 689.09 KB 690.31 KB 146.11 KB 146.2 KB RN_FB_DEV
ReactNativeRenderer-dev.js +0.2% +0.1% 700.24 KB 701.46 KB 148.71 KB 148.8 KB RN_OSS_DEV
ReactNativeRenderer-profiling.js 0.0% 0.0% 275.28 KB 275.28 KB 47.56 KB 47.56 KB RN_OSS_PROFILING
ReactNativeRenderer-dev.js +0.2% +0.1% 700.33 KB 701.55 KB 148.76 KB 148.85 KB RN_FB_DEV
ReactNativeRenderer-profiling.js 0.0% 0.0% 275.27 KB 275.27 KB 47.57 KB 47.57 KB RN_FB_PROFILING
ReactFabric-dev.js +0.2% +0.1% 688.99 KB 690.2 KB 146.07 KB 146.16 KB RN_OSS_DEV
ReactFabric-prod.js 0.0% 0.0% 260.4 KB 260.4 KB 44.88 KB 44.88 KB RN_OSS_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.1% 548.51 KB 549.59 KB 116.13 KB 116.2 KB NODE_DEV
react-reconciler.development.js +0.2% +0.1% 550.93 KB 552.01 KB 117.18 KB 117.24 KB NODE_DEV
react-reconciler.production.min.js 0.0% -0.0% 67.45 KB 67.45 KB 20.12 KB 20.11 KB NODE_PROD

Generated by 🚫 dangerJS

@acdlite acdlite mentioned this pull request May 30, 2019
9 tasks
@threepointone
Copy link
Contributor Author

working on this, changes planned.

While the code itself isn't much (it adds the warning to mountEffect() and updateEffect() in ReactFiberHooks), it does change a lot of our tests. We follow a bad-ish pattern here, which is doing asserts inside act() scopes, but it makes sense for *us* because we're testing intermediate states, and we're manually flush/yield what we need in these tests.

This commit has one last failing test. Working on it.
- a test was failing in ReactDOMServerIntegrationHooks while testing an effect; the behaviour of yields was different from browser and server when wrapped with act(). further, because of how we initialized modules, act() around renders wasn't working corrrectly. solved by passing in ReactTestUtils in initModules, and checking on the finally yielded values in the specific test.
- in ReactUpdates, while testing an infinite recursion detection, the test needed to be wrapped in an act(), which would have caused the recusrsion error to throw. solived by rethrowing the error from inside the act().
@threepointone
Copy link
Contributor Author

fixed the failing test, and amended the other one; see this commit for details 46c0741 I'll work on a better warning message and land this soon.

@threepointone threepointone merged commit e1c5e87 into facebook:master Jun 24, 2019
threepointone added a commit to threepointone/react that referenced this pull request Jun 24, 2019
threepointone added a commit that referenced this pull request Jun 24, 2019
* followup to #15763, failing tests in ReactDOMTracing-test

It was me. I broke the build.

* [ignore] add a newline to trigger a build
rickhanlonii pushed a commit to rickhanlonii/react that referenced this pull request Jun 25, 2019
…k#15763)

* warn if passive effects get queued outside of an act() call

While the code itself isn't much (it adds the warning to mountEffect() and updateEffect() in ReactFiberHooks), it does change a lot of our tests. We follow a bad-ish pattern here, which is doing asserts inside act() scopes, but it makes sense for *us* because we're testing intermediate states, and we're manually flush/yield what we need in these tests.

This commit has one last failing test. Working on it.

* pass lint

* pass failing test, fixes another

- a test was failing in ReactDOMServerIntegrationHooks while testing an effect; the behaviour of yields was different from browser and server when wrapped with act(). further, because of how we initialized modules, act() around renders wasn't working corrrectly. solved by passing in ReactTestUtils in initModules, and checking on the finally yielded values in the specific test.
- in ReactUpdates, while testing an infinite recursion detection, the test needed to be wrapped in an act(), which would have caused the recusrsion error to throw. solived by rethrowing the error from inside the act().

* pass ReactDOMServerSuspense

* stray todo

* a better message, consistent with the state update one.
rickhanlonii pushed a commit to rickhanlonii/react that referenced this pull request Jun 25, 2019
…acebook#15972)

* followup to facebook#15763, failing tests in ReactDOMTracing-test

It was me. I broke the build.

* [ignore] add a newline to trigger a build
@gaearon gaearon mentioned this pull request Jul 30, 2019
This was referenced Mar 10, 2020
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.

4 participants