Infinite render loop in 4.12.1 and up.

[hakanderyal]

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:

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

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

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

[theKashey]

• does it work right with 4.12.0?
• does it not work right with 4.12.3 or 4?
• what is react-redux version?

I've checked code changes between 4.12.0 and 4.12.1 and there is only one place related not related to hooks, and it's quite small.

[hakanderyal]

• Yes, it works fine in 4.12.0
• It breaks in all of the versions between 4.12.1 - 4.12.5, tested each of them separately.
• react-redux@7.1.0, redux@4.0.1, @hot-loader/react-dom@16.8.6, @babel/core@7.5.0 (also happens with @babel/core@7.4.5)

I did some further testing, and this only happens when there are 2 nested components at the root with {pure: false}. It works correctly with only one.

[theKashey]

Ok, sounds like infinity loops in hooks. cc @natew

So:

• 2 nested components

<Component1>
  <Component2/>
</Component1>

• both just mapStateToProps? Are they reading something from props?

Just help me reproduce it.

[hakanderyal]

I was able to reproduce it with 1 component, here are the details:

• using babel plugin "react-hot-loader/babel"
• using webpack alias: 'react-dom': '@hot-loader/react-dom',
• react-redux@7.1.0, redux@4.0.1, @hot-loader/react-dom@16.8.6, @babel/core@7.5.0, webpack@4.35.2, webpack-dev-server@3.7.2
• webpack command webpack-dev-server --hot --config webpack/webpack.config.dev.js

app.js

import { hot } from 'react-hot-loader/root'
import { Provider } from 'react-redux'

import store from './store'

import { MyComponent1 } from './test'

const App = () => (
  <Provider store={store}>
    <MyComponent1>
        test
    </MyComponent1>
  </Provider>
)

export default hot(App)

test.js

import React from 'react'
import { connect } from 'react-redux'

export class MyComponent1 extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

MyComponent1 = connect(state => state, undefined, undefined, {pure: false})(MyComponent1)

When I update the test component:

(MyComponent1, in Connect(MyComponent1) (created by App)) Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

// edit: If any of the child components of MyComponent1 updates the redux store, it also triggers the infinite loop.

[theKashey]

👍I'll update tests and double check. Still not sure how changes between 12.0 and 12.1 might affect it.

Just want to +1 this. I was having an issue with useSelector in an unrelated component (notifications) causing an infinite render only on a particular unrelated page (neither are using the others redux state or modifying it, especially on render) as reported by this module and when I downgraded to 4.12.0 it works fine and anything above 4.12.1 breaks. Very odd as I said, these components are completely unrelated. When I remove the useSelector it doesn't break :/

import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

import { dismissServerNotifications as _dismissServerNotifications } from './actions'
import { getNotifications } from './reducer'

function Notifications() {
	const notifications = useSelector(getNotifications)

	const dispatch = useDispatch()

	useEffect(() => {
		const dismissServerNotifications = notifications => dispatch(_dismissServerNotifications(notifications))

		if (notifications.length)
			dismissServerNotifications(notifications)
	}, [])
...

[dmarkow]

Similar issue here -- but instead of getting an update depth error, Chrome just freezes the page and pegs my CPU at 100%. If I throw a couple console logging lines into my component hierarchy, I can see the whole tree rendering 20-30x/second.

Rolling back to my dependencies from last week (react-hot-loader@4.12.0, babel plugins at 7.4.5, etc.) everything works fine. Upgrading react-hot-loader to anything newer (4.12.1-4.12.5) causes the issue. I'm not using react-redux, though it looks like one of my dependencies (react-beautiful-dnd) is.

Also, disabling the 'react-dom': '@hot-loader/react-dom' webpack alias seems to at least stop the infinite loop (though probably breaks hooks support).

[theKashey]

:oof:

[nmbrone]

Just wanna confirm the same issue. Didn't spend time to find what exactly causes it in my case, just got rolled back to 4.12.0 as it works perfectly for me now.

[bafxyz]

same issue

[theKashey]

Problem has been triaged - related to hooks reloading
Fixing....

RHL is adding a dependency the any hook with dependency which represent "hot-reloading sequence"
There are 3 ways to track that sequence:

1. on component register(babel plugin). That's a wrong way, but it's in use right now for almost all cases. Does not play well with code splitting - it shall not activate any hot replacement logic.
2. on component secondary register, that's already much closer to the realty. This thing is used to track "sequence" for hooks.
3. somewhere in hot, ie track HMR events. But some applications (react-static) uses HMR without hot helper.

The problem is with .2 - component "autodiscovery" breaks logic, moving generation forward during hot replacement process, thus causing infinite loop.

Fix - dont change it if hot replacement is already enabled.