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

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.

[jddxf]

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

[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!