react-hot-loader causes weird behavior when binding in the component constructor

[robjermy]

I ran across this problem earlier today and it seems to be related to this issue in react-hot-loader 313. The following snippet should highlight the issue:

import * as React from 'react';

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bar: {
        s1: '',
        s2: ''
      }
    };
    
    // Good practice bind in the constructor
    this.function1 = this.function1.bind(this);
  }

  function1(event) {
    let bar = this.state.bar;
    bar.s1 = event.target.value;
    this.setState({bar: bar});
    // Input will not update and a warning will show in the log
  }

  function2(event) {
    let bar = this.state.bar;
    bar.s2 = event.target.value;
    this.setState({bar: bar});
    // Expected behavior
  }

  render() {
    <div>
      <input type='text' onChange={this.function1} value={this.state.bar.s1} />
      <input type='text' onChange={this.function2.bind(this)} value={this.state.bar.s2} /> // Bad bind here
    </div>
  }
}

The expected behavior of the above code should be that the two inputs should update as expected on change. However what is happening is that the second input (with this bound in the render function) behaves as you would expect with the input updating when you type. The first input (with this bound in the constructor) causes the following warning to be thrown whenever a character is typed into it. The characters do not update as the state cannot be updated.

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the WHATEVER component.

A quick fix I have found for this case is to just update the webpack.config.base.js by removing the react-hot-loader/webpack loader.

[iRath96]

@robjermy This seems to be a problem with react-proxy (which is a dependency of react-hot-loader and apparently isn't being maintained anymore).

I solved this problem by emitting ES5 code now. Hot loading still works as before and the code you provided should run without problems. Let me know whether this works for you!

[robjermy]

This fix has solved my problem. Thank you very much!