search

sysgears / apollo-universal-starter-kit

Apollo Universal Starter Kit is a SEO-friendly, fully-configured, modular starter application that helps developers to streamline web, server, and mobile development with cutting-edge technologies and ultimate code reuse.
https://apollokit.org
MIT License
1.68k stars 323 forks source link

react-hot-loader 3 #10

Closed zengsai closed 7 years ago

zengsai commented 7 years ago

Is there any plan to using react-hot-loader 3 ?

larixer commented 7 years ago

Right now Webpack HMR is used instead. Is there any benefit of using React Hot Loader 3 compared to Webpack HMR?

zengsai commented 7 years ago

There is an issue in current version of apollo-fullstack-starter-kit: the state of react component can not retained after changing the component using HMR.

Reproduce flow:

  1. npm start
  2. click "Click to increase count" button, N times.
  3. now current count changed, like "Current count, is 9."
  4. change render() function in "src/ui/containers/counter.jsx", like add a new button and save, to trigger HMR.
  5. issue: now, the new button added, but the current count number change to the initial value 5 in the browser, showing "Current count, is 5." (the number in the story is 9).
  6. then click "Click to increase count" button one more time, but the current count number change to 10 in the browser, showing "Current count, is 10."

I'm new to front-end development, and don't know if this about HMR, but after using react-hot-loader 3, this issue is gone.

zengsai commented 7 years ago

I aslo added a local timer in Counter component, the timer be reseted every time the HMR be triggered.

larixer commented 7 years ago

Well, if you want reload latest GraphQL data on HMR, you don't need React Hot Loader 3 for this, it's actually easy to do with Webpack HMR, see my commit: https://github.com/sysgears/apollo-fullstack-starter-kit/commit/e5b00521c13325114b5cb81daf35e97cdcb6af96

If you want React Hot Loader 3 to not touch the state of your components on reload, this is not working well. For example if you change your Redux handlers, or some logic inside your query it won't be executed to React Hot Loader 3. And the thing is, 95% of the time I find myself changing "controller or model" code, not presentation "code". For the scenario of changing not presentation code, but "controller or model" code Webpack HMR is far better then React Hot Loader 3. For the scenario of changing purely presentation code React Hot Loader is better then Webpack HMR.

React Hot Loader 3 is not nice to set up. It wants itself to be present in .babelrc and webpack plugins and entry point, e.g. everywhere. This causes difficulties with maintaining dev and prod configs, because in prod config one don't want React Hot Loader 3 to be present in .babelrc. And the last thing, Dan Abramov, the author of React Hot Loader 3 has left the project.

Because of this, I've decided to exclude React Hot Loader 3 from the project completely and rely on Webpack HMR.

zengsai commented 7 years ago

got it! thanks!

ryanblakeley commented 7 years ago

@vlasenko do you just leave out the react plugin or do you have substitute configs? The latest webpack docs site references using React Hot Loader 3: https://webpack.js.org/guides/hmr-react/. Would you answer on StackOverflow maybe?

larixer commented 7 years ago

@rojobuffalo As explained above, pure Webpack HMR is used instead: https://github.com/sysgears/apollo-fullstack-starter-kit/issues/10#issuecomment-261859946

larixer commented 7 years ago

Okay. Perhaps React Hot Loader 3 support will be included as an optional feature to let people see what works best for them, pure Webpack HMR or React Hot Loader 3 + Webpack HMR. But I'm worried about additional code complexity that this brings in. This starter kit tries to solve many practical problems during development already, maybe even too many.