autobinding lifecycle method

[KarolAdamiec]

Description

when component has componentDidMount = () => {} instead of componentDidMount(){}

Hot loader identifies files to update and patch, but never rerenders.

Expected behavior

Should rerender, or WARN/LOG/ERROR. At the moment fails silently to reload the app. At minimum big bold warning in docs....

"react-hot-loader": "4.7.1", "react": "16.8.1",

[theKashey]

No changes made to componentDidMount are applied by design - your component was and is mounted already.

[devniel]

Hi,

I had this same problem, I had to rewrite step by step my class to discover why it's not rerendering, even updated other libraries or things related to #1120, but in the end this is the problem.

It seems that when using componentDidMount = () => {} the component will never be rerendered when changing its content, using the standard componentDidMount(){} fixes it.

Example:

Here, if you change one by two, it will be rerendered:

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';

class Example extends Component {

  componentDidMount(){};

  render() {
    return (
      <div>
        one
      </div>  
    )
  }
}

function mapStateToProps(state) {
  return {};
}

function mapDispatchToProps(dispatch) {
  return {};
}

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(Example),
);

Here, that change will not work:

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';

class Example extends Component {

  componentDidMount = () => {}

  render() {
    return (
      <div>
        one
      </div>  
    )
  }
}

function mapStateToProps(state) {
  return {};
}

function mapDispatchToProps(dispatch) {
  return {};
}

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(Example),
);

I'm using react-hot-loader: 4.8.4 and react: 16.8.6.

Thanks!

[theKashey]

RHL uses compontDidMount/componentWillUnmount to track their usage -https://github.com/gaearon/react-hot-loader/blob/master/src/proxy/createClassProxy.js#L188

Using "bound" versions of these methods is not letting RHL override them in an expected way, as well as update them in time.

There is no reason to use an arrow version of these methods, no reasons to bind them. Probably the best solution here would be an eslint rule to stop you from doing that.