React 16: ReactDOM.hydrate(...)

entry.js

import React from "react";
import ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader";

import App from "./App";

const render = (hydrate = false) => {
  const container = document.querySelector("#app");
  const element = (
    <AppContainer>
      <App />
    </AppContainer>
  );
  if (hydrate) {
    ReactDOM.hydrate(element, container);
  } else {
    ReactDOM.render(element, container);
  }
};

render(true);

if (module.hot) {
  module.hot.accept(() => {
    render();
  });
}

This helped me a lot today. Thanks!

You can tighten this up a bit:

const render = (hydrate = false) => {
  ReactDOM[hydrate ? 'hydrate' : 'render'](
    <AppContainer>
      <App />
    </AppContainer>,
    document.querySelector("#app"),
  )
};

Might also want to consider the potential for dead code elimination:

render(true);

if (process.env.NODE_ENV !== 'production' && module.hot) {
  module.hot.accept('./App', render);
}