why useObserver hook won't rerender twice, comparing to observer hoc?

Question

I'm reading the docs of mobx-react-lite and confusing with the difference between observer hoc and useObserver hook. According to the docs, observer hoc will trigger re-render twice while useObserver won't:

One good thing about this is that if any hook changes an observable for some reason then the component won't rerender twice unnecessarily. (example pending)

I'm not so familiar with mobx-react-lite, but interested in what causes that differences. Here is the docs: https://mobx-react.js.org/observer-hook

Answer 1

The useObserver hook is only aware of observables referenced within a functional component, whereas the observer HOC is reactive to any observable props. The observer HOC actually just wraps the entire component in useObserver.