Bug: MobX-like observer pattern doesn't work with Fast Refresh because Hooks don't get detected

[Bnaya]

React version: 17.0.0

Steps To Reproduce

1. https://codesandbox.io/s/react-refresh-webpack-plugin-rendered-more-hooks-than-during-the-previous-render-issue-ezcrz?file=/src/Comp.js
2. Delete one of the hooks there

Link to code example:
https://codesandbox.io/s/react-refresh-webpack-plugin-rendered-more-hooks-than-during-the-previous-render-issue-ezcrz?file=/src/Comp.js

The current behavior

You get "Rendered more hooks than during the previous render" error

The expected behavior

Should hot reload and re-mount the component.

The source of the issue have two parts:

1. react-refresh and the bundler fails to inject signature to the component
2. When no signature apparent, react-refresh consider the components as compatible, which is not always true, as in the repro

   react/packages/react-refresh/src/ReactFreshRuntime.js

   Lines 126 to 132 in 9aca239

   	function haveEqualSignatures(prevType, nextType) {
   	const prevSignature = allSignaturesByType.get(prevType);
   	const nextSignature = allSignaturesByType.get(nextType);
   	if (prevSignature === undefined && nextSignature === undefined) {
   	return true;
   	}

I've filed an issue also for the webpack plugin: pmmmwh/react-refresh-webpack-plugin#266
Mobx related issue: mobxjs/mobx#2668

[Sadin1111]

React version: 17.0.0

Steps To Reproduce

1. https://codesandbox.io/s/react-refresh-webpack-plugin-rendered-more-hooks-than-during-the-previous-render-issue-ezcrz?file=/src/Comp.js
2. Delete one of the hooks there

Link to code example:
https://codesandbox.io/s/react-refresh-webpack-plugin-rendered-more-hooks-than-during-the-previous-render-issue-ezcrz?file=/src/Comp.js

The current behavior

You get "Rendered more hooks than during the previous render" error

The expected behavior

Should hot reload and re-mount the component.

The source of the issue have two parts:

1. react-refresh and the bundler fails to inject signature to the component
2. When no signature apparent, react-refresh consider the components as compatible, which is not always true, as in the repro

   react/packages/react-refresh/src/ReactFreshRuntime.js

   Lines 126 to 132 in 9aca239

   	function haveEqualSignatures(prevType, nextType) {
   	const prevSignature = allSignaturesByType.get(prevType);
   	const nextSignature = allSignaturesByType.get(nextType);
   	if (prevSignature === undefined && nextSignature === undefined) {
   	return true;
   	}

I've filed an issue also for the webpack plugin: pmmmwh/react-refresh-webpack-plugin#266
Mobx related issue: mobxjs/mobx#2668

[Sadin1111]

5d65cbe3c8dca5f463613495003c5f96006a3555

[rizrmd]

This is impacting user who uses mobx as their state management, as each of component should be wrapped with observer. I noticed that this problem only affect snowpack project, CRA are fine.

When component is wrapped in observer, fast-refresh does not work.

[TeosVerdi]

I'd love to find a solution (or at least workaround) for this issue.
It persists on Next.js without snowpack, only using react-refresh.
See mobxjs/mobx#2794 (comment)

[rizrmd]

Potential work around for mobx is to use <Observer /> component instead of observer hoc, for example your old component:

const Component = observer(() => {
    return <div>Hello</div>
})

will become like this:

const Component = () => {
    return <Observer>{() => (
        <div>Hello</div>
    )}</Observer>
}

[TeosVerdi]

Sadly, it doesn't work in my case. I've tried arrow functions, Observer component and HOC: neither of them do the trick, the checkbox stays checked after refresh either way.

[AoDev]

@rizkyramadhan I have tried the <Observer/> approach but couldn't solve all the cases in the end.

[rizrmd]

Yeah, it's pretty wierd... I ended up ditching snowpack altogether, Now I use customized esbuild for my bundler.

[yuhongda]

Yeah, it's pretty wierd... I ended up ditching snowpack altogether, Now I use customized esbuild for my bundler.

Hi, can you talk more about the customized esbuild solution?

[AoDev]

@rizkyramadhan I dont use snowpack, nor do I know what it is. We have a "normal" setup with react-refresh-webpack-plugin without any sort of abstraction like CRA.

React Hot Loader V3 was the last version that worked properly for our mobx / react apps and we'd stayed on it if it were not for incompatibilities coming with new React versions. RHL v4 never properly worked with similar behaviour than react-refresh. Disappointing that we had a better developer experience 5 years ago.

[rizrmd]

Yeah, it's pretty wierd... I ended up ditching snowpack altogether, Now I use customized esbuild for my bundler.

Hi, can you talk more about the customized esbuild solution?

Basically I build my own bundler, first I tested simple esbuild solution using react, and modify the esbuild parameters with various esbuild plugins according to my needs, and setup chokidar to watch my src folders for changes.

When source changes, I broadcast the changes using esm-hmr protocol, currently it's still using naive dom replacement without react-refresh. But it's really fast, even comparable to react-refresh due to esbuild.

I use fastify to serve the files.

The most important thing is mobx and another npm package that I use works out of the box.