RNMobxHooks

React Native sample app using MobX in both Class and Functional components.

Dependencies

• React Native 0.59.10
• React 16.8.3
• MobX 5.13.0
• MobX-React 6.1.3
• TypeScript 3.5.3

Known issues and workarounds

• Unable to use MobX-React 6 decorators in React Native 0.59
  • Workaround
  • Fix for this won't land until React Native 0.61
  • Dan Abramov recommend avoiding the use of decorators yet
• Pass stores around
  • Can be done via inject HOC of via React context API in both Class and Functional components
  • Simpler to use hooks in Functional components
• Ensure reactiveness
  • Observer components only track data that is accessed during the render method - not an issue with Functional components as it's essentially only a render method.
  • Render callbacks are not part of the render method.
  • Best to avoid both render callbacks and HOC, which is doable with Functional components and hooks.

Resources

• https://twitter.com/jamonholmgren/status/1153866321966166016
• https://iconof.com/best-practices-for-mobx-with-react/
• https://mobx.js.org/best/pitfalls.html
• https://mobx-react.js.org/recipes-migration