React Hot Loader 3

[steida]

Waiting for gaearon/react-hot-boilerplate#61

[tajo]

Why do you need RHL if you don't keep any state in your components? Rerendering of the root component is good enough for most cases - no magic, always works.

[steida]

That's very good point. But I am not sure how it will work with HOC etc. Can you describe your DX? Thank you.

[steida]

Can you send the pull request? If everything works, we are good to go.

[steida]

I am just implementing browser Theme component (based on rebass), which should be HOCable, so I have to implement it as classic ES6 component. Maybe your suggestion solves it.

[tajo]

Check this article from Dan:

However if you do use something like Redux, I strongly suggest you to consider using vanilla HMR API instead of React Hot Loader, React Transform, or other similar projects. It’s just so much simpler—at least, it is today.

It just works, including HOC, stateless components... etc. It just rerenders everything. It's dumb. No magic. The only problem can be performance if your app is super huge (aka virtual dom diff of the whole component tree). RHL proxies all components and can do fine-grained re-renders. However, it's brittle. The trade-off is not worth it in 99% cases.

EDIT: I don't use React Native but I don't see why it shouldn't work there. Again, it just rerenders everything.

[tajo]

And this works great for HMR of redux-saga: https://gist.github.com/hoschi/6538249ad079116840825e20c48f1690

And something like this for reducers:
http://stackoverflow.com/questions/34655695/redux-how-to-keep-the-reducer-state-during-hot-reload

You can use vanilla HMR api for side effects, reducers and React... -> Basically everything is hot reloadable and it never crashes or produces weird errors.

[steida]

@tajo That's one of the best comment I read :-) Just one question, how an error in component or code works?

[tajo]

Compile-time errors are taken care of by Webpack (it displays a nice overlay in the browser). Run-time errors need a little tweak, so JS and HMR don't die. Something like this:

if (module.hot) {
  module.hot.accept('./main', () => {
    try {
      const NextApp = require('./main').default; // eslint-disable-line
      ReactDOM.render(<NextApp />, rootEl);
    } catch (e) {
      console.log(e);
    }
  });
}

Prints the error into console. You can make it better with some stack trace etc. I haven't used this try catch until now. I guess it's pretty rare two introduce a run-time error in stateless and logic-free React components. :) Comparing to a plenty of typos / syntax errors.