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

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

Clone https://github.com/kentcdodds/bookshelf
Put a debugger right above the React.useEffect() in the DiscoverBooksScreen Component
Hit the debugger break point and resume execution of code
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

Untitled Untitled2

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 18
Comments: 21 (1 by maintainers)

Most upvoted comments

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

+12

jiahaoyu666 on Aug 12, 2021

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

Roesh on Feb 3, 2022

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

pailas on Oct 19, 2021

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.

arash87 on Apr 29, 2021

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

SangeetAgarwal on Nov 16, 2020

Apparently, this issue is still present in React 17.0.2

biels on Jul 22, 2021

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

HenriH9527 on Aug 11, 2021

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.

ncrmro on Feb 18, 2021