mobx-react observer broken react-hot-loader

[wangkechun]

demo: https://github.com/gaearon/react-hot-loader/pull/1418/files
pull this github mr and edit examples/typescript/src/Counter.tsx:32
react-hot-loader will not work

ref: gaearon/react-hot-loader#1419

[danielkcz]

Can you help out a bit more? I never used hot loader and I don't know specifics how exactly it works and what is the expected outcome. Can you look at the observer code if you see something suspicious? We are hacking the sCU there, does the hot loader need it somehow?

mobx-react/src/observerClass.ts

Line 19 in 9b2ffb1

export function makeClassComponentObserver(

Edit: Possibly related #500

[danielkcz]

Also can you please try it out with mobx-react@5? There was some major refactor with V6, so would be great to know if we have some regression or it's a new issue.

[mweststrate]

FWIW I personally never supported react-hot-loader, as it has too many issues, especially in combination and would be an unending support burden (just reasoning about what should be the correct behavior can already be very tricky in cases). My hopes of the new fast-refresh mechanism are slightly better a it seem to behave much more consistently with known supported and unsupported cases.

[genaby]

@WearyMonkey @FredyC
Looks like it works in following way (at least for me):
<Observer>{() => <YourComponent/>}</Observer>

@mweststrate for me react-hot-loader provides significant boost in development

[danielkcz]

I think we can close it here. Unless someone can come up with specifics, it doesn't seem to be worth the effort. In my opinion, hot reloading is overrated. There are much better tools for quick development, be it Storybook for designing components or actual tests when verifying logic.

[BEGEMOT9I]

@mweststrate @FredyC Hi. I have the same issue. As a reference, I took the example proposed by @wangkechun. I've tested PureComponent, Component and mobx-react@5.2.8. And none of this works. But functional-component working is properly. Hack with <Observer>{() => <YourComponent/>}</Observer> working properly too.

[danielkcz]

Can you perhaps try react-fast-refresh instead? It was introduced into React Native first where it seems to be working and now it should be available for React as well.

Either way, please open a new issue if it doesn't turn out to be working either.