Why do React components that throw errors render twice?

7
votes

I've been experimenting with components that do a react-cache style thing and do web service calls right in the render method, throwing a promise up to a React.Suspense component and re-rendering when the data is there. They call a web service, check the response, and either render or throw an error up to an error boundary depending on the response. I've noticed that whenever an error is thrown in a component, it renders twice. The first time the callstack looks normal, and the second time the callstack includes calls to invokeGuardedCallbackDev and invokeGuardedCallback, which seem to have something to do with React ensuring that errors appear in the console even when "caught" by an error boundary in a dev build.

I can reproduce this with react and react-dom 16.8.6 by just rendering a component like this: https://codesandbox.io/s/components-that-throw-render-twice-i26qc.

I'm wondering why this happens, because it's causing the components to re-fetch data from the web service, re-throw another promise, and results in an "Uncaught Promise" error appearing in the console.

2
reactjs
Nice catch! For what it's worth, this may not be due to react-error-overlay (as noted in the codesandbox description). I was able to reproduce this with plain old CDN link, but only with the development edition and not the minified production one. This may be a good candidate for an issue on GitHub. In addition, adding error boundary to App did not help the re-render; it still happened. And does not happen in 16.2.0, but does in 16.3.0! – Kashyap

2 Answers

3
votes

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

2
votes

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.