score:2

i think the error boundary is not actually catching the thrown error.

from https://reactjs.org/docs/error-boundaries.html:

note

error boundaries do not catch errors for:

asynchronous code (e.g. settimeout or requestanimationframe callbacks)

asynchronous code includes promises in this case.

see also https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers:

error boundaries do not catch errors inside event handlers.

if you need to catch an error inside event handler, use the regular javascript try / catch statement.

score:4

this seems to be caused by a recent change in react/react-dom. if you revert both to version 16.0.0, you will see that it only renders the component once. see: https://codesandbox.io/s/components-that-throw-render-twice-03fdb

looking at the version history, there seem to be a couple of bugs fixed relating to error handling in react, so it seems like this re-rendering is a result of a workaround for one of those bugs.

however, this should not be a problem for your app, as the render function should be pure (no side effects) in react apps. so basically, react can call your render function anytime it wants/needs to.

to work around this, you should avoid relying on the component not re-rendering and instead use an effect hook or similar to only fetch when certain props/state change.

source: https://github.com/facebook/react/issues/16130#issuecomment-521637592


Related Query

More Query from same tag