To understand this better, you need to look at how webpack offers hot module loading for other non-react cases.
The idea is quite simple actually… Webpack detects changes happening to your code and recompiles the corresponding modules. However, it cannot safely replace the module references on the fly itself. This is why you need to implement the HMR interface yourself, hence the module.hot call in your example code.
When a newer version of a module is available, Webpack goes up the modules chain (i.e., if X imported Y and Y has changed, webpack starts going from X > W > V…) till it finds a module which implemented HMR for Y or X or W or V etc. Then it reloads the entire chain from there.
If it reaches the root without any HMR accepting the change, it refreshes the entire page :).
Now The matter of App and NextApp… App is the statically imported version of you module. As modules are parsed and loaded only once by default, App points to a constant reference which never changes. This is why another variable NextApp is used in the example which receives the changed module within the HMR code.
Finally, the require and require.default… when dealing with ES6 imports (export default MyComponent), the exported module is of the format {“default” : MyComponent}. The import statement correctly handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn’t work inline. If you want to avoid that, use module.exports instead of export default.