mobx claims to "automatically detect rendering of observables".
On the other hand, React useEffect claims "By using this Hook, you tell React that your component needs to do something after render".
So what is the difference? When do I use mobx and when do I use React useEffect?
Don't think of them as the same thing, one is part of a state management tool (observables) and the other is a way to perform whats known as a "side-effect" when your application state changes.
Mobx observables ONLY listen for changes within your Mobx stores, for example the results of an API call, who the current authenticated user is or even if a dropdown menu is open. If you don't have anything in your store, nothing will happen, observer doesnt interact with local react state.
useEffect is for performing operations AFTER something has changed, for example AFTER your dropdown menu has been toggled open, we might want to fetch some more data, but useEffect is not tied in to mobx, meaning useEffect can be made to respond to anything state related, whether is props, local state (useState) or even data from useContext.