Bug: Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering if debugger present

[SangeetAgarwal]

If a debugger is present in the main body of a functional component then on hitting the debugger and proceeding from there an unstable_flushDiscreteUpdates warning is thrown.

React version: ^16.13.1

Steps To Reproduce

1. Clone https://github.com/kentcdodds/bookshelf
2. Put a debugger right above the React.useEffect() in the DiscoverBooksScreen Component
3. Hit the debugger break point and resume execution of code
4. unstable_flushDiscreteUpdates warning is thrown in the console.

Link to code example: https://github.com/kentcdodds/bookshelf

The current behavior

unstable_flushDiscreteUpdates warning is thrown in the console

The expected behavior

unstable_flushDiscreteUpdates warning should not be thrown in the console

[kentcdodds]

And it's not just something weird about the bookshelf app as @SangeetAgarwal notes:

I was able to reproduce this issue in an app written a couple of years back that used class components too

https://github.com/kentcdodds/bookshelf/issues/113#issuecomment-720100770

[SangeetAgarwal]

@bvaughn I know folks are a bit preoccupied but I'm just a bit concerned about this issue.

Reason being that I have an all hooks app in production that's doing fine, I plan on using the same pattern (swr, routing, authentication etc.) for another major app & for both these apps if I put a debugger & attempt to step through, I get this unstable_flushDiscreteUpdates warning.

This second app I'm replatforming from ko will be used quite intensively & I just wanted to be sure I wasn't doing something drastically wrong that may come back to bite me later.

I was able to reproduce this bug in @kentcdodds https://github.com/kentcdodds/bookshelf app too.

Thank you

[SangeetAgarwal]

@varrior see my original comment, only when a debugger is present this issue occurs.

[vadimkhm]

Hi all, the same situation if in debug mode component throws an exception. Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering. Without a debugger, it works as expected. React version: ^17.0.1

[ncrmro]

I'm seeing this when I remove all text from an input inside a form. The error shows up at the formRef.

Seems to disappear when I pass the formRef into the child component.

[SangeetAgarwal]

@benrhere @ncrmro @SabinaHuseyn I'm not quite sure what the issues you are facing has anything to do with the issue I reported... I get the warning if I put a debug statement & the issues you all are facing are very different from mine. Could the 3 of you open separate issues please.

And, while you are at it if you could delete your comments so as not to confuse the issue even further.

Many thanks.

[benrhere]

Will do

[benrhere]

I created https://github.com/facebook/react/issues/20917 per your suggestion @SangeetAgarwal . I think the issues actually may be similar: I also see the same error, I believe at a similar time as you (after hitting a breakpoint). I've also tested adding a "debugger" statement and I see the same behavior, though the root cause may be different.

[i7eo]

@varrior see my original comment, only when a debugger is present this issue occurs.

The problem I'm having is closing the debugger, the UI keeps updating, it has to wait a while for it to come out. This error occurs when I open the debugger. I'm very upset that without a debugger I don't know what's causing the UI update bug. 😖

[mvdobrinin]

Reproduced on react 16.13.1.

[arash87]

A simple demo in CodeSandbox with examples in class- and function components. Open up the codesandbox Browser window in a seprate tab, toggle devtools on and set a breakpoint in render function of the child or parent component. Do a couple of refresh and you will see the warning showing up, but only when you continue from a breakpoint/debugger statement.

<Child /> calls the passed down function in its componentDidMount(). Function updates <Parents /> state and triggers a new render. Demo includes a similar example with function-component using hooks with the same output.

[biels]

Apparently, this issue is still present in React 17.0.2

[HenriH9527]

The same bug was repeated in version 17.0.0: Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

[jiahaoyu666]

still present in "react": "^17.0.2", "react-dom": "^17.0.2", "next": "^11.0.1"

[pailas]

I do see the same issue while debugging "react": "^17.0.2", "react-dom": "^17.0.2", "@reduxjs/toolkit": "^1.5.1"

[Darshankatthige]

we can use useMemo here right?

On Tue, 18 Jan 2022 at 15:48, munkk @.***> wrote:

Math.random() as a key do the trick

— Reply to this email directly, view it on GitHub https://github.com/facebook/react/issues/20141#issuecomment-1015260762, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJUQU5RMLVPVQ3Y6EMGQUALUWU46TANCNFSM4TGR7RGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you are subscribed to this thread.Message ID: @.***>

[SangeetAgarwal]

@munkk @Darshankatthige sorry.. but I have no idea what either of you are saying. Can you please remove your comments as they seem to have no bearing on on this bug. Thanks

[biels]

I have seen this error lots of times across many react projects.

@SangeetAgarwal Maybe with Math.random() as key he means that force remounting the component on every render the error is not shown?

[evferrer87]

Any solution for this warning? It only happens to me when I set a breakpoint in the render function.

[roshan-sama]

This seems to be happening to me when I'm using Nextjs' useRouter and doing a push. In prod I don't see the error, but locally it shows up in console logs when the tab doesn't change: https://portfolio.roshan.page/blog

So after a little debugging it seems like I only introduced this issue after using Mantine's useNotifications hook in the Layout. Removing this fixes the issue, but I have yet to determine why

[gaearon]

I expect this not to happen in 18 because these methods were removed. If this still reproes, please file a new issue with a sandbox.