HMR not working properly on non-functional components

[howardya]

To reproduce,

git clone yarn yarn develop

then change the following in the file shared/components/DemoApp/AsyncHomeRoute/HomeRoute.js

function HomeRoute() {
  return (
    <div>
      <Helmet>
        <title>Home</title>
      </Helmet>

      <h2>{config('welcomeMessage')}</h2>

      <p>
        This starter kit contains all the build tooling and configuration you
        need to kick off your next universal React project, whilst containing a
        minimal project set up allowing you to make your own architecture
        decisions (Redux/Mobx etc).
      </p>
    </div>
  );
}

to

class HomeRoute extends React.PureComponent { // eslint-disable-line
  render() {
    return (
      <div>
        <Helmet>
          <title>Home</title>
        </Helmet>

        <h2>{config('welcomeMessage')}</h2>

        <p>
          This starter kit contains all the build tooling and configuration you
          need to kick off your next universal React project, whilst containing a
          minimal project set up allowing you to make your own architecture
          decisions (Redux/Mobx etc).
        </p>
      </div>
    );
  }
}

The HMR will not work properly. Specifically, when we change the text, the browser will only reload for the second time I save.

Is this known issue?

[ctrlplusb]

Can you try use Component rather than PureComponent for interests sake?