Error in React component causing app to re-render, which is causing infinite loop. Why?

Question

Without including code yet, I am wondering if anyone has ran into an issue where you:

• Have a component which is wrapped in connect and, in my case apollo-client
• Have child components also wrapped in connect that do a dispatch in componentWillMount
• Throw an error in a child component
• Get an infinite loop

The situation I am in is that any child that throws an error causes the parent component to run render again and all children seem to run componentWillMount , but do not run componentWillUnmount .

The error is not logged and does not appear in the console until the call stack overflows.

This causes them to all re-connect to Redux, dispatch the action as well as throw the error again because they are mounting again, which causes the loop.

I can try to repro, but that will take quite a bit of time, just wondering if someone has run into a similar issue that could offer somewhere to look.

Answer 1

You should not be dispatching any actions in componentWillMount. Anything that is considered mutable should be done in componentDidMount. componentWillMount is similar to a constructor. The component hasn't mounted. The component is unaware of any state (unless you specify) but that state is not fulfilled until the component actually mounts, which happens in componentDidMount. Ideally, you should stick to the constructor and not really use componentWillMount. For any API calls or dispatching, you should keep those in cDM

Answer 2

Clayton is right; ComponentWillMount is somewhat of an anti-pattern, despite having once been the way and the truth. You probably want to useComponentDidMount .

However, since you mentioned throwing, it's worth nothing that React 16 has a componentDidCatch lifecycle hook . This allows you to catch the error and handle it in react:

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI

In theory, this should allow you to handle the error and short-circuit connect .