But we also have multiple smaller stores which are not connected to the root store. Think: multiple not-connected trees where each node is a store.
I must agree that both approaches have pros and cons, e.g. passing down data down a long path of stores is annoying.
Out of curiosity, how do your 'not connected' stores know when, say, a user logs out?
Also, I suppose you have to write code, bespoke to each object, to be able to reset these objects too?
> how do your 'not connected' stores know when, say, a user logs out?
If they need this information, it can be passed in from above, or pulled from context. But unless the store and component need to stay mounted when user logs out, they might not need to do anything. There's nothing wrong with a local store being created by a component that receives props and provides them via constructor arguments.
> write code, bespoke to each object, to be able to reset these objects too?
I almost never do this, and nearly always create a new store when the component mounts. The combination of `useLocalStore`[1] with mobx-react-lite makes this straight forward. So per the above example, your component could `useLocalObservable(() => new Store(props.user))`
I don't think that is quite correct. I think it keeps a mapping of observed properties and which React components rely on them. Then, changing any property becomes a lookup (not a walk) of who is observering, and a `forceRender` on the results. So if no components are observing the property, there's no further computation. Its not "on top of what React does" because it short-circuits it (like useMemo) -- except you don't have to hand-craft any useMemo comparators, it does that for you by tracking which properties you access.
The current store holding most of the displayed data stays alive (while not switching to a different route), but everything else resets or gets recreated when needed. (no need to keep stores alive if they are not required or used)
Stores for specific "sub" views (think dialogs, tabs, collapsibles, ...) are getting created/destroyed ad-hoc.
Main Store for a specific view holds the current data (which receives updates via gql subscriptions ~every second), the current filter which is applied to it's children (only show Apple related securities) and currently visible/hidden state of any children.
User/App/Global related attributes which don't change often are stored in a globally available object (and is easy for us as users don't log out or anything)