import React, { Component } from 'react';
 
class ComponentVersion1 extends Component {
  render() {
    return <div>Before hot update.</div>;
  }
}
 
class ComponentVersion2 extends Component {
  render() {
    return <div>After hot update.</div>;
  }
}

const rootEl = document.getElementById('root');
React.render(<ComponentVersion1 />, rootEl);
React.render(<ComponentVersion2 />, rootEl); // will reset state and kill DOM :-(

import { createPatch } from 'react-patch';
const patch = createPatch();
 
const PatchedComponentVersion1 = patch(ComponentVersion1);
React.render(<PatchedComponentVersion1 />, rootEl);
 
patch(ComponentVersion2); // will keep the state and DOM