MobX with React functional components setup — better than Redux?

Recommended MobX setup with React functional components

Photo by Ferenc Almasi on Unsplash

Table of contents

• Background
• Core concept
  — State
  — Action
  — Derivations
• How it works
• MobX file structure in React with functional components
• APIs
  — observable & makeObservable
  — makeAutoObservable
  — observer
  — action
  — runInAction
  — ⚠️ Handling promises
  — computed
  — autorun
  — reaction
  — when
  — ⚠️ Tips on autorun, reaction and when
• Summary: MobX’s equivalent React hooks and class component
• Debugging
  — trace
• Conclusion

Background

Coming from a background of Redux user, I used to believe Redux was the best option for global state management. You might notice that in most of the online tutorial, the state management library to be chosen in React project is always Redux. As a software engineering beginner tutored by YouTube, I was surprised by how clean and straight forward MobX is when I was working on a MobX project. Comparing to Redux, MobX is much cleaner, simpler yet still as powerful as Redux. It is even more optimal in performance comparing to Redux…