sag1v

class ReactRoot extends React.Component {
  state = {
    millis: Date.now(),
    timezoneOffset: new Date().getTimezoneOffset(),
    request: 0
  };

  componentDidMount() {
    this.setState({
      request: requestAnimationFrame(this.tick)

sag1v

/* these methods and props are known to cause reflow and layout 
   see list from https://gist.github.com/paulirish/5d52fb081b3570c81e3a
*/

const reflowLogger = function() {
  // we don't want to redefine our properties
  if (window.__reflow_log__) return;
  window.__reflow_log__ = true;

  const noop = () => {};

sag1v

const withRemount = (Component, key) => (props) => {
  const asKey = props[key];
  return <Component key={asKey} {...props} />
}

sag1v

class App extends Component {
  state = {
    showCounter: false,
    title: 'Whaaa! cool',
    currentCount: 3
  }

  componentDidUpdate(prevProps, prevState) {
    const { showCounter, title, currentCount } = this.state;
    const shouldUpdateCounter =

sag1v

class App extends Component {

  componentDidMount(){
    window.ReactCounter.mount();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">

sag1v

class App extends Component {
  state = {
    showCounter: false,
    title: 'Whaaa! cool',
    currentCount: 3
  }

  // create refs so we can pass the element to mount and unmount
  counterOneRef = React.createRef();
  counterTwoRef = React.createRef();

sag1v

class App extends Component {
  state = { showCounter: false, title: 'Whaaa! cool' }

  componentDidUpdate(prevProps, prevState) {
    const { showCounter, title } = this.state;
    const shouldUpdateCounter =
      prevState.showCounter !== showCounter || prevState.title !== title;
    if (shouldUpdateCounter) {
      if (showCounter) {
        window.ReactCounter.mount({ title });

sag1v

class App extends Component {
  state = { showCounter: false }

  componentDidUpdate(prevProps, prevState) {
    const { showCounter } = this.state;
    if (prevState.showCounter !== showCounter) {
      if(showCounter){
        window.ReactCounter.mount();
      } else{
        window.ReactCounter.unmount();

sag1v

class App extends Component {
  state = {
    showCounter: false,
    title: 'Whaaa! cool',
    currentCount: 3
  }

  toggleCounter = () => this.setState(({ showCounter }) => ({ showCounter: !showCounter }));

  onTitleChange = ({ target }) => this.setState({ title: target.value });

sag1v

window.ReactCounter = {
    mount: () => {
        const el = document.getElementById('counter-app');
        ReactDOM.render(<Counter />, el);
    },
    unmount: () => {
        const el = document.getElementById('counter-app');
        ReactDOM.unmountComponentAtNode(el);
    }
}