How to use the react-hot-loader/Injection.RootInstanceProvider function in react-hot-loader

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import app from './app';

var elem = React.createElement(app);
var rootInstance = ReactDOM.render(elem, document.getElementById('root'));

if (module.hot) {
    require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
        getRootInstances: function () {
            // Help React Hot Loader figure out the root component instances on the page:
            return [rootInstance];
        }
    });
}

import React from 'react';
import { render } from 'react-dom';
import RootComponent from './components/RootComponent';
import App from './components/App';

const rootInstance = render(, document.getElementById('react-wrapper'));

if(module.hot) {
  require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}

const rows = [
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}]
];

const rootInstance = React.render(
    ,
    document.getElementById('app')
);

if (module.hot) {
    require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}

import React from 'react'

import App from 'app/components/App'

var rootInstance = React.render(
  App(),
  document.getElementById('content')
)

// from https://christianalfoni.github.io/react-webpack-cookbook/Hot-loading-components.html
if (module.hot) {
  require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance]
    }
  })
}

const React = require('react'),
      ShareThisEmail = require('./ShareThisEmail');

var rootInstance = React.render(
    ,
    document.querySelectorAll('.the-form')[0]
);

if (module.hot) {
    require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
        getRootInstances: function () {
            // Help React Hot Loader figure out the root component instances on the page:
            return [rootInstance];
        }
    });
}

const rows = [
    [{ number: 1 }, {number: 2}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1 }, {number: 2}, {number: 3, isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1 }, {number: 2}, {number: 3}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6, isReserved: true}]
];

const rootInstance = React.render(
    ,
    document.getElementById('app')
);

if (module.hot) {
    require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}

onYChange={ this.handleYChange }
          x={ this.state.x }
          y={ this.state.y }
        />
      
    );
  }
}

const rootInstance = ReactDOM.render(
  ,
  document.getElementById('reactRoot')
);

if (process.env.NODE_ENV !== 'production' && module.hot) {
  require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}

import React from 'react';
import ReactDOM from 'react-dom';

import Demo from './Demo.react';

// Fix for rendering React externally:
// See https://github.com/gaearon/react-hot-loader/tree/v1.3.1/docs#usage-with-external-react
const rootInstance = ReactDOM.render(
    ,
    document.getElementById('react-demo-entry-point')
);

/* eslint-disable */
require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
/* eslint-enable */
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
});

import React from 'react';
import ReactDOM from 'react-dom';

import Demo from './Demo.react';

// Fix for rendering React externally:
// See https://github.com/gaearon/react-hot-loader/tree/v1.3.1/docs#usage-with-external-react
const rootInstance = ReactDOM.render(
    ,
    document.getElementById('react-demo-entry-point')
);

/* eslint-disable */
require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
/* eslint-enable */
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
});