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 about async infinite useEffect loop #15180

Merged
merged 2 commits into from Mar 22, 2019

Conversation

@gaearon
Copy link
Member

commented Mar 21, 2019

This surfaces problems like #14920 (comment) where the same root keeps scheduling updates inside useEffect, and never manages to "rest". It only catches the "synchronous" case (setState directly in useEffect).

Screen Shot 2019-03-21 at 4 54 45 PM

I've made it DEV-only because a crash would be a breaking change. The heuristic might also not be perfect yet and I'd like to give it some time to see if there are edge false positives.

@gaearon gaearon force-pushed the gaearon:usefx-wa branch from aee7fed to a68fbe8 Mar 21, 2019

while (error === null) {
Scheduler.unstable_flushNumberOfYields(1);
await Promise.resolve();
}

This comment has been minimized.

Copy link
@gaearon

gaearon Mar 21, 2019

Author Member

This is my shoddy attempt to faithfully emulate deferred useEffect case. (I don't want to flush it all synchronously.)

idontknowwhatimdoing.jpg

This comment has been minimized.

Copy link
@acdlite

acdlite Mar 21, 2019

Member

Try this

ReactDOM.render(<App />, container, () => Scheduler.yieldValue('Did commit'));
expect(Scheduler).toFlushAndYieldThrough(['Did commit']);
// Synchronous effect has run, but not passive effects.
// Now flush the effects:
Scheduler.flushAll();

This comment has been minimized.

Copy link
@acdlite

acdlite Mar 21, 2019

Member

Actually I forgot this is sync mode. Might be easier to use a boolean since the effect runs an arbitrary number of times before erroring.

ReactDOM.render(<App />, container);
expect(container.textContent).toEqual(whatever);
// Synchronous effect has run, but not passive effects.
expect(didFlushPassiveEffect).toBe(false);
// Now flush the effects:
Scheduler.flushAll();

This comment has been minimized.

Copy link
@gaearon

gaearon Mar 21, 2019

Author Member

I wanted to simulate a real deferred loop between them to make sure the warning still fires. Not sure if it matters.

This comment has been minimized.

Copy link
@acdlite

acdlite Mar 21, 2019

Member

To do that you need an assertion in between the synchronous commit phase and the effect phase. As is, your test would pass even if the passive effects were totally sync.

@@ -581,6 +584,14 @@ function commitPassiveEffects(root: FiberRoot, firstEffect: Fiber): void {
if (!isBatchingUpdates && !isRendering) {
performSyncWork();
}

if (__DEV__) {
if (rootWithPendingPassiveEffects === root) {

This comment has been minimized.

Copy link
@gaearon

gaearon Mar 21, 2019

Author Member

Only keep incrementing if flushing root's deferred effects schedules the same root again.

@sizebot

This comment has been minimized.

Copy link

commented Mar 21, 2019

Details of bundled changes.

Comparing: 3151813...9cdb8c4

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.1% +0.1% 803.96 KB 804.91 KB 182.29 KB 182.54 KB UMD_DEV
react-dom.profiling.min.js 0.0% -0.0% 108.07 KB 108.07 KB 34.62 KB 34.61 KB UMD_PROFILING
react-dom.development.js +0.1% +0.1% 798.35 KB 799.3 KB 180.68 KB 180.93 KB NODE_DEV
react-dom.production.min.js 0.0% -0.0% 105.07 KB 105.07 KB 33.46 KB 33.46 KB NODE_PROD
react-dom.profiling.min.js 0.0% -0.0% 108.17 KB 108.17 KB 34.08 KB 34.07 KB NODE_PROFILING
ReactDOM-dev.js +0.1% +0.2% 822.74 KB 823.76 KB 182.25 KB 182.53 KB FB_WWW_DEV
react-dom-unstable-fire.development.js +0.1% +0.1% 804.31 KB 805.26 KB 182.43 KB 182.69 KB UMD_DEV
react-dom-unstable-fire.production.min.js 0.0% -0.0% 105.11 KB 105.11 KB 33.99 KB 33.99 KB UMD_PROD
react-dom-unstable-fire.development.js +0.1% +0.1% 798.69 KB 799.65 KB 180.81 KB 181.08 KB NODE_DEV
react-dom-unstable-fire.production.min.js 0.0% -0.0% 105.08 KB 105.08 KB 33.47 KB 33.47 KB NODE_PROD
react-dom-unstable-fire.profiling.min.js 0.0% -0.0% 108.18 KB 108.18 KB 34.08 KB 34.08 KB NODE_PROFILING
ReactFire-dev.js +0.1% +0.2% 821.95 KB 822.97 KB 182.11 KB 182.39 KB FB_WWW_DEV
ReactFire-profiling.js 0.0% 0.0% 324.76 KB 324.76 KB 59.4 KB 59.4 KB FB_WWW_PROFILING
react-dom-test-utils.development.js 0.0% -0.0% 47.49 KB 47.49 KB 12.98 KB 12.98 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% -0.1% 9.73 KB 9.73 KB 3.59 KB 3.58 KB NODE_PROD
react-dom-server.browser.development.js 0.0% -0.0% 133.68 KB 133.68 KB 35.37 KB 35.37 KB UMD_DEV
react-dom-server.browser.production.min.js 0.0% -0.0% 18.93 KB 18.93 KB 7.14 KB 7.14 KB UMD_PROD
react-dom-server.browser.development.js 0.0% -0.0% 129.81 KB 129.81 KB 34.43 KB 34.43 KB NODE_DEV
react-dom-server.browser.production.min.js 0.0% -0.0% 18.86 KB 18.86 KB 7.14 KB 7.14 KB NODE_PROD
ReactDOMServer-dev.js 0.0% -0.0% 132.15 KB 132.15 KB 34.19 KB 34.19 KB FB_WWW_DEV
ReactDOMServer-prod.js 0.0% -0.0% 45.67 KB 45.67 KB 10.57 KB 10.56 KB FB_WWW_PROD
react-dom-server.node.development.js 0.0% -0.0% 131.75 KB 131.75 KB 34.97 KB 34.97 KB NODE_DEV
react-dom-server.node.production.min.js 0.0% -0.0% 19.72 KB 19.72 KB 7.44 KB 7.44 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% -0.1% 3.66 KB 3.66 KB 1.45 KB 1.45 KB UMD_DEV
react-dom-unstable-fizz.browser.development.js 0.0% -0.1% 3.49 KB 3.49 KB 1.41 KB 1.41 KB NODE_DEV
react-dom-unstable-fizz.node.development.js 0.0% -0.1% 3.74 KB 3.74 KB 1.43 KB 1.43 KB NODE_DEV

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js +0.2% +0.2% 565.39 KB 566.34 KB 122.15 KB 122.39 KB UMD_DEV
react-art.production.min.js 0.0% -0.0% 96.76 KB 96.76 KB 29.67 KB 29.67 KB UMD_PROD
react-art.development.js +0.2% +0.2% 496.3 KB 497.26 KB 104.76 KB 105 KB NODE_DEV
react-art.production.min.js 0.0% -0.0% 61.77 KB 61.77 KB 18.89 KB 18.89 KB NODE_PROD
ReactART-dev.js +0.2% +0.2% 506.22 KB 507.25 KB 104.07 KB 104.31 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.2% 626.3 KB 627.33 KB 133.69 KB 133.94 KB RN_FB_DEV
ReactNativeRenderer-profiling.js 0.0% 0.0% 251.85 KB 251.85 KB 44.3 KB 44.3 KB RN_FB_PROFILING
ReactNativeRenderer-dev.js +0.2% +0.2% 626.22 KB 627.24 KB 133.65 KB 133.9 KB RN_OSS_DEV
ReactNativeRenderer-profiling.js 0.0% 0.0% 251.87 KB 251.87 KB 44.3 KB 44.3 KB RN_OSS_PROFILING
ReactFabric-dev.js +0.2% +0.2% 616.73 KB 617.76 KB 131.33 KB 131.59 KB RN_FB_DEV
ReactFabric-prod.js 0.0% 0.0% 239.68 KB 239.68 KB 41.79 KB 41.79 KB RN_FB_PROD
ReactFabric-dev.js +0.2% +0.2% 616.64 KB 617.66 KB 131.3 KB 131.55 KB RN_OSS_DEV

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.2% 507.68 KB 508.63 KB 106.91 KB 107.15 KB UMD_DEV
react-test-renderer.development.js +0.2% +0.2% 503.2 KB 504.15 KB 105.77 KB 106 KB NODE_DEV
react-test-renderer.production.min.js 0.0% -0.0% 62.45 KB 62.45 KB 18.95 KB 18.95 KB NODE_PROD
ReactTestRenderer-dev.js +0.2% +0.2% 514.26 KB 515.29 KB 105.5 KB 105.76 KB FB_WWW_DEV
react-test-renderer-shallow.development.js 0.0% 0.0% 38.98 KB 38.98 KB 9.81 KB 9.81 KB UMD_DEV
react-test-renderer-shallow.development.js 0.0% -0.0% 33.2 KB 33.2 KB 8.42 KB 8.41 KB NODE_DEV

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js +0.2% +0.3% 496.41 KB 497.37 KB 103.57 KB 103.84 KB NODE_DEV
react-reconciler-persistent.development.js +0.2% +0.3% 494.3 KB 495.25 KB 102.71 KB 102.98 KB NODE_DEV

Generated by 🚫 dangerJS

const container = document.createElement('div');
ReactDOM.render(<App />, container);
while (error === null) {
Scheduler.unstable_flushNumberOfYields(1);

This comment has been minimized.

Copy link
@acdlite

acdlite Mar 21, 2019

Member

Since the first yieldValue call happens in a passive effect, this actually will flush the effects synchronously

ReactDOM.render(<App />, container);
while (error === null) {
Scheduler.unstable_flushNumberOfYields(1);
await Promise.resolve();

This comment has been minimized.

Copy link
@acdlite

acdlite Mar 21, 2019

Member

Don't think this matters

@gaearon gaearon merged commit 5c2b2c0 into facebook:master Mar 22, 2019

1 check passed

ci/circleci Your tests passed on CircleCI!
Details

@gaearon gaearon deleted the gaearon:usefx-wa branch Mar 22, 2019

Kiku-Reise added a commit to Kiku-Reise/react that referenced this pull request May 16, 2019

Warn about async infinite useEffect loop (facebook#15180)
* Warn about async infinite useEffect loop

* Make tests sync
@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.