Fast refresh breaks mobx observers

[jakst]

Fast refresh does not work with components wrapped in a mobx observer. It fails with the below message.

Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Related issue in mobx-react repo: mobxjs/mobx-react-lite#226

React Native version: 0.61.2

Steps To Reproduce

1. Create a new react-native project with version 0.61.0 or higher
2. Install package mobx-react
3. Open up App.js and wrap your App component in an observer

import { observer } from 'mobx-react';

const App = () => {
  return (...);
}

export default observer(App);

4. Spin up the app in your simulator/emulator and enable fast-refresh.
5. Change something in the App component.
6. Save App.js

Describe what you expected to happen:
The app throws a red screen with the error message in the beginning of the issue, instead of updating the component with the change.

[plrdev]

This is happening to me as well. It seems like second fast refresh will result into the error, not the first one.

[gaearon]

I can look into it after I'm back from vacation (please remind me if I don't, and not here, because GH notifications are useless.)

I don't have confidence that this is a bug in Fast Refresh. It should work fine when you use idiomatic React, but mobx is a bit of a special case since it relies on mutation so much, and there's likely a few unusual tricks that it's doing.

As I wrote in mobxjs/mobx-react-lite#226 (comment), Fast Refresh "frees" useMemo / useCallback, and re-runs all effects once. We can't do it differently — that's the whole premise of the feature. If that behavior breaks mobx, mobx can probably adapt to it.

[gaearon]

See mobxjs/mobx-react-lite#226 (comment) — this is expected behavior given Fast Refresh semantics, and something that should be possible to fix in Mobx.