Infinite render loop in 4.12.1 and up.

Author: hakanderyalCreated Jul 7, 2019Updated Oct 25, 2021

Description

For versions 4.12.1 and up (last tested at 4.12.5), my app goes into a infinite render loop, resulting in "Invariant: Maximum update depth exceeded" error displaying in the rhl redbox anytime it hot reloads, or on pages that makes change to redux state. It works fine in 4.12.0.

The error is the result of one of the root components of my app, exported with react-redux connect:

javascript
export default connect(mapStateToProps, undefined, undefined, {pure: false})(MyComponent)

If I change the pure option to true, the problem disappears.

javascript
export default connect(mapStateToProps, undefined, undefined, {pure: true})(MyComponent)

Don't have time right now to create a reproducible demo, I'll look into it if its needed.

Expected behavior

It's shouldn't break.

Actual behavior

It goes into an infinite render loop.

Environment

React Hot Loader version: 4.12.1 and up

Run these commands in the project folder and fill in their results:

  1. node -v: v11.9.0
  2. npm -v: 6.5.0

Then, specify:

  1. Operating system: MacOS Mojave
  2. Browser and version: Chrome/Firefox latest

Source: gaearon/react-hot-loader