ErrorBoundary rendering multiple copies of itself when ref assignment fails

[silverwind]

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

bug

What is the current behavior?

When a error occurs during the assignment of a ref (and maybe other conditions), a error boundary wrapping that error may get confused and it renders itself multiple times inside the same parent. See https://codesandbox.io/s/stoic-fermi-6etqb which renders:

<div id="root">
  <div class="boundary"><span>content</span></div>
  <div class="boundary"><span>error</span></div>
</div>

What is the expected behavior?

<div id="root">
  <div class="boundary"><span>error</span></div>
</div>

[gaearon]

Is this a new bug?

[silverwind]

Flipping through the versions on that sandbox, it first appears in react-dom@16.3.0-alpha.1.

[fireflyEngineer]

Is this issue still opened ? If so I'll have a try.

[dhrubesh]

@gaearon Mind if I take this up?

[GasimGasimzada]

Shouldn't you be using getDerivedStateFromError instead of componentDidCatch to set the error state:

class ErrorBoundary extends React.Component {
  state = { err: null };

  static getDerivedStateFromProps(err) {
    return { err };
  }
  
  // componentDidCatch = err => this.setState({ err });
  // ^ This should only be used for side effects. E.g logging errors etc

  render() {
    return (
      <div className="boundary">
        {this.state.err ? <span>error</span> : this.props.children}
      </div>
    );
  }
}

EDIT: https://codesandbox.io/s/brave-mahavira-g9n5x

[silverwind]

Shouldn't you be using getDerivedStateFromError instead of componentDidCatch

Ideally both should work but I just tested getDerivedStateFromError and it does not seem to be affected by this issue.

See https://codesandbox.io/s/recursing-dawn-l029b for the getDerivedStateFromError version. Flip lines 7 and 8 in it for both versions. The Error overlay needs to be manually dismissed in the componentDidCatch version to see the double rendering.