What is 'react-hot-loader/babel' for?

Question

I have setup react-hot-reload based on the getting started on npm. The first step was to add

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

I have a single component app with a counter state and button that increments the states counter. When testing this out it appears to work, and retain its state with/without this plugin in my .babelrc when I add/remove random components in my render() method.

So my question is, what is this peice of the jigsaw meant to be doing? why is it required?

The App i'm using to test this,

import { hot } from 'react-hot-loader/root';
import React from 'react';

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value:0};
    }

    handleButtonClick(event)
    {
        console.log("click");
        this.setState( state => ({
            value:state.value + 44

        }));
    }

    render() {
      return (
        <div>
            <div>
            <a>asd</a>
            <p>asssd</p>
        <input></input>
          <button onClick={this.handleButtonClick.bind(this)}></button>
            2<div>{this.state.value}</div>
            </div>
        </div>
      );
    }
  }

export default hot(App);

Answer 1

The purpose of the react-hot-reload/babel plugin is for quick development. It allows scripts that have recently been changed to be updated without the need to refresh the app/page. It is not required by any means, but allows developers to quickly iterate and view their code changes without losing state in memory.