Webpack4 + react-hot-loader modified state page cannot be hot updated - Codes Helper

configure https://github.com/gaearon/re. according to the document. When you modify the name field of state in the file, the page will not be updated, but the button text, page in the render function will be updated.

"dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js"

base config

const path = require("path");
const APP_PATH = path.resolve(__dirname, "../app");
const DIST_PATH = path.resolve(__dirname, "../dist");

module.exports = {
  entry: {
    app: "./app/index.js",
    vendors: ["react", "react-dom"]
  },
  output: {
    filename: "js/bundle.js",
    path: DIST_PATH
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: "babel-loader",
        include: APP_PATH
      }
    ]
  }
};

dev config


module.exports = merge(baseWebpackConfig, {
  mode: "development",
  output: {
    filename: "js/[name].[hash:16].js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      inject: "body",
      minify: {
        html5: true
      },
      hash: false
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    port: "3015",
    contentBase: path.join(__dirname, "../public"),
    compress: true, // gzip
    historyApiFallback: true,
    hot: true, //  webpack 
    https: false,
    noInfo: false,
    open: true, // open the browser
    proxy: {}
  }
});

index.js



import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

App.js

import React from "react";
import { hot } from "react-hot-loader";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "world",
      show: true
    };
  }

  render() {
    return <div>
      {this.state.show && <button>button</button>}
      <h1>Hello, {this.state.name}</h1>
    </div>;
  }
}

export default hot(module)(App);

console can print log, after the code update, but the page is not updated. What is the reason?

[WDS] 91% - additional asset processing.
client:127 [WDS] 92% - chunk asset optimization.
client:127 [WDS] 92% - after chunk asset optimization.
client:127 [WDS] 93% - asset optimization.
client:127 [WDS] 93% - after asset optimization.
client:127 [WDS] 94% - after seal.
client:127 [WDS] 95% - emitting.
client:127 [WDS] 95% - emitting (HtmlWebpackPlugin).
2VM5824 client:127 [WDS] 98% - after emitting.
2VM5824 client:127 [WDS] 100% - Compilation completed.
VM5824 client:218 [WDS] App hot update...
VM5849 log.js:24 [HMR] Checking for updates on the server...
client:218 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Nothing hot updated.
log.js:24 [HMR] App is up to date.
VM5849 log.js:24 [HMR] Updated modules:
VM5849 log.js:24 [HMR]  - ./app/App.js
VM5849 log.js:24 [HMR] App is up to date.