Double render for failed component with ErrorBoundary

[Freak613]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When using ErrorBoundary, component has been rendered twice, even after throwing error during the first render.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
Having simple example:

• Straightforward ErrorBoundary copied from docs;
• Functional component Boom, that throws error on first render;

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: undefined };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    console.log("getDerivedStateFromError", { error });
    return { error };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    console.log("componentDidCatch", { error, info });
    // this.setState({ error });
  }

  render() {
    console.log("ErrorBoundary.render", this.state.error);

    if (this.state.error) {
      return "Oops";
    }

    return this.props.children;
  }
}

let boomCounter = 0;
const Boom = () => {
  console.log("Boom", ++boomCounter);
  throw new Error("Boom");
};

function App() {
  return (
    <div className="App">
      <ErrorBoundary>
        <Boom />
      </ErrorBoundary>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Boom component has been rendered twice, even after throwing error during the first render.
To make it more clear, I'm logging global counter, increasing with each render :
https://codesandbox.io/s/agitated-lumiere-6zd3h

What is the expected behavior?
Failed component shouldn't be rendered after throwing an error.
Internals of the component can produce side-effects or whatever else, that can be worsen if done twice.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.8.6
Browsers: Safari, Chrome.

I have 2 assumptions why is that (I haven't read React core):

• To perform graceful shutdown of useEffect/componentWillUnmount and stuff like that.
• This happens because Boom component provided as external dependency, being rendered in App tree alongside with ErrorBoundary itself. And React perform full render of the App tree, despite ErrorBoundary could have something else to show.

This case is very confusing.
Feel free to close the issue if this behavior is expected, though it should be noted in the documentation.
Ideas of how to get desired behavior are welcome.
I haven't found open problem with this exact behavior described, that's why I created a new one.

[Freak613]

Not to say this is definitely differs from JS catch {} behavior, where failed code won't be executed second time.

[Freak613]

This case is valid even for deeply nested trees and class components:
https://codesandbox.io/s/still-wood-po48r

And for failed component, it will try to recreate it one more time, meaning that all constructor code going to be executed again.

[Freak613]

• Trying to isolate children into childrenFunction <ErrorBoundary>{() => <BoomContainer />}</ErrorBoundary> doesn't help.
• With getDerivedStateFromError/componentDidCatch method in all components, it seems that React unconditionally trying to create/render component second time, even before any of error lifecycle methods have been called:
  https://codesandbox.io/s/romantic-cori-oh3hk

BoomContainer.constructor 
BoomContainer.render 
Boom.constructor 
Boom.render 1                          // throws 1st time
Boom.constructor 
Boom.render  2                         // throws 2nd time
BoomContainer.getDerivedStateFromError // only after that parent method has been called

[gaearon]

Rendering should never have side effects in React. We assume we can re-render any component whenever necessary. So none of the code should make assumptions about the number of renders.

[EduVencovsky]

I'm not sure in what version this change happened but if you change the react version to 16.0.0, it will render only once.

As you can see in this codesandbox.

[fozhao]

Basically the double rendering makes the ErrorBoundary useless for gracefully handle the error to the user. The app get a chance to notify the developer about the error but the app also is doomed to unmount the entire component tree or probably crash.

[fozhao]

I tried to setState of the ErrorBoundary component to avoid rendering the problematic children, but the second render of the crash component still happen too fast to be avoided.

[Freak613]

I remember that I've discovered this issue while playing with my own "promise-throwing + Suspense" solution, which is for sure not official API and in fact it IS firing side-effect during render phase, but this is not the subject of this issue. What I've found is this double rendering, which seemed odd for me. It's fine if this is internal implementation requirements, even if the team don't want to disclose any usecases of this behavior.

[cccccroge]

Basically the double rendering makes the ErrorBoundary useless for gracefully handle the error to the user. The app get a chance to notify the developer about the error but the app also is doomed to unmount the entire component tree or probably crash.

Just bumped into this problem. I use static variable to solve it:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidCatch(error, info) {
    // for some reason this might get called twice, and we don't want to sent error twice
    if (ErrorBoundary.triggered) {
      return
    }
    ErrorBoundary.triggered = true
    // send notification to your error handling service here
  }

  render() {
    return this.props.children;
  }
}
ErrorBoundary.triggered = false