Skip to content

Instantly share code, notes, and snippets.

@lixiaoyan
Last active June 28, 2019 20:33
Show Gist options
  • Save lixiaoyan/e341588023881aaa02da90e941b05761 to your computer and use it in GitHub Desktop.
Save lixiaoyan/e341588023881aaa02da90e941b05761 to your computer and use it in GitHub Desktop.
React 16: ReactDOM.hydrate(...)
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();
});
}
@jednano
Copy link

jednano commented Jun 28, 2019

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);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment