React: Bug: When throwing an error on component render, the component rerenders and throws twice, but componentDidCatch runs only once.

[EduVencovsky]

This question on stack overflow was made and while trying to solve it, I realized something.

I found out that on version 16.12.0 of react, when you throw an error on the render method, it render and throws the error twice, but componentDidCatch runs only once.

I version 16.0.0 it throws the error only once.

React version:

16.0.0 throws the error only once.
16.12.0 throws the error twice .

Steps To Reproduce

1. Test this codesandbox
2. Click on the number until it throws the error
3. Look at the console and see the it logs twice the message rendering BuggyCounter. count: 5
4. Go in the package.json and change the react version from 16.12.0 to 16.0.0.
5. Do that same from steps 2 and 3 and you will see the message only once.

The current behavior

The error is being thrown twice and componentDidCatch is running only once.

The expected behavior

The error should be thrown only once or componentDidCatch should run the number of times an error is thrown.

I'm not sure if it's intended to be or if it's a new thing that changed in the newer version, if that is the case, please let me know.

[ayershov777]

It seems this issue was introduced in 16.3

[ayershov777]

If the error is thrown from componentDidUpdate instead of render, then the component is not rendered an "extra" time.

[jddxf]

This is an intentional behavior in DEV.
https://github.com/facebook/react/blob/c55c34e46a6d8148afb78594d14f4675f9346900/packages/shared/ReactFeatureFlags.js#L16-L18

[pasDamola]

Hi guys, i tried to replicate this issue and I discovered that its the react-dom version that's the cause. When i change the react-dom version to "16.0 - 16.2", the error is thrown only once, but from react-dom version "16.3" and above, its thrown twice. How can one go about fixing this

[ayershov777]

Hi guys, i tried to replicate this issue and I discovered that its the react-dom version that's the cause. When i change the react-dom version to "16.0 - 16.2", the error is thrown only once, but from react-dom version "16.3" and above, its thrown twice. How can one go about fixing this

It seems the best you can do is to close the error screen when it pops up, and you will see the result of componentDidCatch.

[pasDamola]

Hi @ayershov777 so i just tried that and it just displayed "Error" on the screen

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!