Skip to content

Instantly share code, notes, and snippets.

@lixiaoyan lixiaoyan/entry.js
Last active Jun 28, 2019

Embed
What would you like to do?
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();
});
}
@jedmao

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.