What exactly does mobx-react-lite's "useLocalStore" hook do, and why is it (only sometimes) needed?

Question

Within the mobx-react documentation there are variations in how stores are created. For example, on the React Context page:

In the first code sample, the store is instantiated with useLocalStore:

  const store = useLocalStore(createStore)

In the second code sample, the stores are initiated by directly "newing" the stores":

  counterStore: new CounterStore(),
  themeStore: new ThemeStore(),

By inference, the first is a "local" store (and thus needs useLocalStore), and the second is a "global" store and thus doesn't. However, it is not clear why this is, and what the subsequent differnce in behaviour is.

Why is useLocalStore not needed in second example, and what difference does this make to the behavior of the stores and mobx within React?

Thanks for any input

Answer 1

OK, I found the answer. useLocalStore turns a javascript literal into a store with observable properties. This is not needed if a store is created from a class object with observable attributes.

Thanks to @freddyc for the answer

Answer 2

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