Bugs when using mobx in react native (fast-refresh)

[misaeldossantos]

I like mobx a lot, but it has been difficult to use it in react native with fast refresh. There are several problems that have occurred, some were reported some time ago, but have not been resolved.

Intended outcome:

I am trying to use mobx with react native and have the code updated correctly when I am developing

Actual outcome:

I will list some problems I had:

1. When I wrap the component in a "observer", adding or removing any hook inside the react component causes the application to crash with the error: "Rendered fewer hooks than expected..." (already mentioned at Rendered fewer hooks than expected with React Fast Refresh while using observer #2668).

2. When I change the code inside the useLocalObservable hook, the code is not updated in the app. I have to close the app and open it again for the change to be persisted. If the component is not wrapped in an observer, changing the code causes the application to be reloaded from scratch. This is very bad.

3. When mobx class code is changed (built with makeObservable or makeAutoObservable), the application reloads from scratch.

I really like mobx, both for the ease of writing code and the performance benefits, but that makes me sad, I have been facing these problems for about 2 years. It makes the library seem unstable.

How to reproduce the issue:

1. Create an application with react native

2. Wrap the component for testing in mobx-react observer function

3. Use the useLocalObservable hook inside the react component

4. Change the code in useLocalObservable

Versions

"mobx": "^6.3.3",
"mobx-react": "^7.2.0",
"react": "^17.0.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",

[vbylen]

Expo sdk42 is not compatible with react 17.

Try upgrading to sdk43?

[misaeldossantos]

Expo sdk42 is not compatible with react 17.

Try upgrading to sdk43?

I have apps with react 16 and expo 40/41/42 and the error is the same. It's not version incompatibility, because I always start a project with "expo init"

[Yrsafam]

I am experiencing the same problem and I managed to figure out what is to blame for this babel plugin.

A few days later I found out what caused it. I am using mobx 6 on a project and the documentation states what needs to be added to babel.config.js is(@babel/plugin-proposal-class-properties):

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
    [['@babel/plugin-proposal-class-properties', {loose: false}]],
  ],
};

As soon as I remove the connection of this plugin, everything starts working normally. At the moment I don't understand how this affects metro and how I can still use the specified plugin. I tried to make various configurations.

this comment also helped me solve the problem

my info:

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 7.26 GB / 15.96 GB
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.23.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210110.135312.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 23, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5900203
    Visual Studio: Not Found
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.64.2 => 0.64.2
    react-native-windows: 0.64.19 => 0.64.19
  npmGlobalPackages:
    *react-native*: Not Found

[urugator]

@Yrsafam Are you, by any chance, transpiling modules, that are not defined by you - like node_modules or react-native etc?
[['@babel/plugin-proposal-class-properties', {loose: false}]], should only be used to transform your code.
Afaik node_modules is usually ignored by default, so it shouldn't be a problem, but possibly react-native workflow is somehow different and so the plugin applies to other sources as well?

[Yrsafam]

@Yrsafam Are you, by any chance, transpiling modules, that are not defined by you - like node_modules or react-native etc? [['@babel/plugin-proposal-class-properties', {loose: false}]], should only be used to transform your code. Afaik node_modules is usually ignored by default, so it shouldn't be a problem, but possibly react-native workflow is somehow different and so the plugin applies to other sources as well?

Hi, as far as I can see, only my code is being broadcast, but because a fix related to override for babel.config helped me.js, then I assume somewhere there is a transpilation inside the react-native config, which broke everything

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[misaeldossantos]

i think i solved this problem inside react-refresh. I disabled the next update if the component name is "observerComponent". I don't know if I should do a PR as this is a mobx specific issue and maybe the react team doesn't want to include:

misaeldossantos/react@f6eb19d.

Maybe it's possible to add a property in the component function to disable refresh in any component that needs it: Component.disableReactRefresh = true, but I'm not sure that's a good thing

[paprikman]

This is still relevant on any bundler with any transpiler plugin. It is obvious that it is never going to be resolved on the React side. Is there something that we can do about it?

[mweststrate]

Is there something that we can do about it?

No idea. Anyone investigating / championing a solution is welcome :)