How to prevent React from recreating component tree on error?

Question

I'm working on an app, which throws an error somewhere within a React component, so in the console there's this error:

React will try to recreate this component tree from scratch using the error boundary you provided

I don't really get why React is even doing this since it's obviously going to result in an infinite render loop (and it does), since the error will keep happening every time it re-render.

So I'm wondering, can this behaviour be disabled somewhere? I'm not sure what is causing it, if it's just React or some other plugin. Any help would be appreciated.

I think somewhere in your componentWillReciveProps method state getting updated. due to that it might goes into infinite loop — Javed Shaikh, Jan 31 '19 at 12:20
I believe @MohamedRamrami is correct; re-rendering the component gives you a chance to check for the error state and render a fallback (which should short-circuit any loop you are seeing). — clint, May 24 '19 at 22:04

score 3 · Answer 1 · answered Apr 16 '20 at 21:26

3

After a lot of digging I've managed to sort it out.

I've found the solution on react-hot-loader repo. As they say:

On Hot Module Update we will inject componentDidCatch and a special render
to every Class-based component you have, making Error Boundaries more local.

So, two possible solutions:

Change your class component to a functional component.
You can write your own error reporter (as it's specified here).

For me, both of this worked.

answered Apr 16 '20 at 21:26

Bogdan Mihai

71
5

Can you specify which components should convert to the functional component? Your explanation seems right and I tried to convert the components. but confused which one should be converted – Sindujan Nirmalan Mar 11 '22 at 09:02

score 2 · Answer 2 · answered Jul 02 '20 at 17:41

2

i suppose you have this method in your component ErrorBoundary, just remove

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.    
     return { hasError: true };
 }

answered Jul 02 '20 at 17:41

David Zambrano

650
7
13

I had to remove the `getDerivedStateFromProps` – Alynva Feb 19 '21 at 15:59

score 0 · Answer 3 · answered Mar 22 '21 at 05:40

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

It's re-rendering multiple times. so you will get this issue. Add React.PureComponent in the class Component it will resolve your issue

score -1 · Answer 4 · answered Nov 21 '22 at 20:08

If you are using create-react-app, a simple workaround would be to just disable or hide the overlay instead of stopping re-rendering. Note, the ErrorBoundary, by default, will work as intended without overlaying the stack trace in a production environment.

To get rid of it in a development environment:

Solution 1, CSS:

body > iframe {
  display: none !important;
} //careful, this can hide all iframes in your application

Solution 2, Extra Module: https://www.npmjs.com/package/react-app-error-boundary?activeTab=readme

Other solutions: Disable error overlay in development mode

How to prevent React from recreating component tree on error?

4 Answers4