Difference between way of importing mobx

Question

How does the following import make a difference?

import { observer } from 'mobx-react/native'

instead of

import { observer } from 'mobx-react'

Additional Information

• React Native version: ~0.48.4
• React: 16.0.0
• mobx-formatters: 1.0.2,
• mobx-logger: 0.6.0,
• mobx: 3.3.1,
• mobx-persist: 0.3.4,
• mobx-react: 4.3.3

Comment If any more information required

Answer 1

Mobx-React uses a function called unstable_batchedUpdates. This dependency comes from react-dom (browser) or react-native (mobile). On your mobile device you have no dom so you can not use react-dom. So when you import 'mobx-react/native' it uses the function from the react-native package.

See here:

https://github.com/mobxjs/mobx-react/blob/0e1cdc83bfb7e45a43aa9b8f23498d3c95943433/src/index.js

You can also see in mobx-react in your nodes modules folder, that the index.js (resolved when importing from 'mobx-react') gets the ReactDom as a dependency:

}(this, (function (exports,mobx,React,ReactDOM) { 'use strict';

While on the other hand importing from 'mobx-react/native', it gets reactNative as a dependency instead of the ReactDom:

}(this, (function (exports,mobx,React,reactNative) { 'use strict';

If you want to learn more about react batching updates read here:

• https://stackoverflow.com/a/33613918/2379376
• https://github.com/facebook/react/blob/3b43f3190bbcc5d4cfe77dbc665e03b7b95d35b2/src/renderers/tests/ReactUpdates-test.js