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

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

This comment has been minimized.

Copy link

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 referenced this pull request May 30, 2019
7 of 9 tasks complete
@threepointone

This comment has been minimized.

Copy link
Contributor Author

commented Jun 14, 2019

working on this, changes planned.

@threepointone threepointone force-pushed the threepointone:unacted-effects-warn branch from 1757db6 to afdad24 Jun 17, 2019

threepointone added some commits May 29, 2019

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 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().

@threepointone threepointone force-pushed the threepointone:unacted-effects-warn branch from afdad24 to 46c0741 Jun 23, 2019

@threepointone

This comment has been minimized.

Copy link
Contributor Author

commented Jun 23, 2019

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 added some commits Jun 23, 2019

@threepointone threepointone force-pushed the threepointone:unacted-effects-warn branch from 5b07b1a to b8202ba Jun 24, 2019

@threepointone threepointone force-pushed the threepointone:unacted-effects-warn branch from b8202ba to 8bcfcc3 Jun 24, 2019

@threepointone threepointone merged commit e1c5e87 into facebook:master Jun 24, 2019

13 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: flow Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: lint_build Your tests passed on CircleCI!
Details
ci/circleci: process_artifacts Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_build Your tests passed on CircleCI!
Details
ci/circleci: test_build_prod Your tests passed on CircleCI!
Details
ci/circleci: test_dom_fixtures Your tests passed on CircleCI!
Details
ci/circleci: test_source Your tests passed on CircleCI!
Details
ci/circleci: test_source_fire Your tests passed on CircleCI!
Details
ci/circleci: test_source_persistent Your tests passed on CircleCI!
Details
ci/circleci: test_source_prod Your tests passed on CircleCI!
Details

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, fix failing test in ReactDOMTracing-test (#15972)
* followup to #15763, failing tests in ReactDOMTracing-test

It was me. I broke the build.

* [ignore] add a newline to trigger a build

rickhanlonii added a commit to rickhanlonii/react that referenced this pull request Jun 25, 2019

warn if passive effects get queued outside of an act() call. (faceboo…
…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 added a commit to rickhanlonii/react that referenced this pull request Jun 25, 2019

followup to facebook#15763, fix failing test in ReactDOMTracing-test (f…
…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 referenced this pull request Jul 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.