Mobx - when to use useLocalStore hook with react-mobx

Question

I don't get why useLocalStore hook exist. I am declaring stores outside of the React component body using the observable method imported from mobx lib.

Then, every component that uses the store in any way is wrapped into observer HOC from mobx-react.

Everything works perfectly fine, but I'm not sure whether I'm not doing something wrong because useLocalStore hook is used all over the documentation and I'm not using it.

Example with store being declared outside of the react component:

import { observable } from 'mobx'
import { observer } from 'mobx-react'

const person = observable({ name: 'John' })

const Person = observer(function Person() {
  return (
    <div>
      {person.name}
      <button onClick={() => (person.name = 'Mike')}>No! I am Mike</button>
    </div>
  )
})

Why would I use useLocalStore hook?

Answer 1

useLocalStore has been deprecated in favor of useLocalObservable, see here.