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
Merged

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon 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.

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

Choose a reason for hiding this comment

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

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

idontknowwhatimdoing.jpg

Copy link
Collaborator

Choose a reason for hiding this comment

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

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

Copy link
Collaborator

Choose a reason for hiding this comment

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

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

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

Copy link
Collaborator

Choose a reason for hiding this comment

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

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) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

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

@sizebot
Copy link

sizebot 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);
Copy link
Collaborator

Choose a reason for hiding this comment

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

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();
Copy link
Collaborator

Choose a reason for hiding this comment

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

Don't think this matters

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.

None yet

4 participants