title: error boundary component catches error but disappears straight away
body: <p>I have a component that is deliberately throwing an error, wrapped in an error boundary component.</p>
  <p>It catches the error and displays the message but only for a split second.</p>
  <p>This is my wrapped component</p>
  <pre><code>  useEffect(() =&gt; {   
          error(); 
      }, []);
  
      const error = () =&gt; {
          try {
              return [].replace(/'--'/, '')
          } catch (error) {
             throw(error)
              
          }
      }
  </code></pre>
  <p>and my error boundary component</p>
  <pre><code>class ErrorBoundary extends Component {
      constructor(props) {
        super(props);
        this.state = { hasError: false };
      }
    
      static getDerivedStateFromError(error) {
          console.log('derived', error)
        // Update state so the next render will show the fallback UI.
        return { hasError: true };
      }
    
      componentDidCatch(error, errorInfo) {
          console.log('error did catch', error)
        this.setState({ hasError: true})
      }
    
      render() {
        if (this.state.hasError) {
          return (
              &lt;h1&gt;Something went wrong.&lt;/h1&gt;
          );
        }
    
        return this.props.children; 
      }
    }
  </code></pre>
  <p>Then i am declaring the components like so</p>
  <pre><code>&lt;ErrorBoundary&gt;
     &lt;ProfileContainer /&gt;
  &lt;/ErrorBoundary&gt;
  </code></pre>
  <p>When my component loads it catches the error as it should and it's receiving it in the boundary component. It displays the error message but then immediately crashes</p>
  <p><a href="https://i.stack.imgur.com/Jw38Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jw38Q.png" alt="enter image description here" /></a></p>
  <p>Am I handling this the wrong way? I know error boundaries are for DOM errors but its interesting that it is catching the error.</p>
  <p>Any help greatly appreciated</p>