hot reloading is not working (sometimes)

[codescv]

change App.js to this:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {test: 'foo'};
  }
  render() {
    return (
      <div className={styles.app}>
        {this.state.test}
      </div>
    );
  }
}

then run npm start

now , if we change

return (
      <div className={styles.app}>
        {this.state.test}
      </div>
    );

to

return (
      <div className={styles.app}>
        {this.state.test} hello
      </div>
    );

the browser refreshes correctly.

but if we change

this.state = {test: 'foo'};

to

this.state = {test: 'bar'};

the browser content does not refresh although in console you can see some logging in the console stating that it is refreshing.

not sure if this is a bug in the middleware or configuration though.