State of component

Local observable state can be introduced by using the hook, that runs its initializer function once to create an observable store and keeps it around for a lifetime of a component.

All properties of the returned object will be made observable automatically, getters will be turned into computed properties, and methods will be bound to the store and apply mobx transactions automatically. If new class instances are returned from the initializer, they will be kept as is.

The naming useLocalStore was chosen to indicate that store is created locally in the component. However, that doesn't mean you cannot pass such store around the component tree. In fact it's totally possible to tackle global state management with despite the naming. You can for example setup bunch of local stores, assemble them in one root object and pass it around the app with a help of the React Context.

Non observable dependencies

since mobx-react-lite@1.4.0 or mobx-react@6.0

The useLocalStore supports passing a second argument with a plain object of anything non-observable you want to be used in store derivations. It might be a value from props, or even useReducer if you like to mix things up. The object you pass in the second arg should always have a same shape (no conditionals).

Note that internally the hook is used to wrap around passed object. If you don't need actions or computed properties, feel free to use that hook directly. See more about state outsourcing.