Clarification on usage for multiple independent state items

[gmol27]

Hi there,

We just started using this a couple of weeks ago in a React Native project and it's doing the job for us well.

I wanted to clarify what the intended usage is for cases with multiple separate independent pieces of state. All the documentation and examples I've seen (and I apologise if I've actually missed this somewhere) just cater of one piece of state, eg. "counter".

Should we be using a separate hook and store for each thing we want to store? Or should we just have one hook and one store which contains a state object with all our different items of state in it - and I guess in this case you would have multiple actions to set individual specific items in the state?

Or does it not really matter either way?

Thanks
Glenn

[albertogasparin]

We have a small page on it: https://atlassian.github.io/react-sweet-state/#/recipes/composition (maybe should find a better name or expand it a bit).

Anyway the gist is that we suggest you use hooks as an interface to build "controllers" that deal with multiple sweet-state stores (or any kind of hook really).
That said, sweet-state is not too opinionated about it. Whenever you prefer one single store with multiple actions (and hooks with selectors) or multiple independent stores is down to your use case: if your API returns multiple entities in one go it might be simpler to use one store, otherwise doing composition might lead to a better architecture and separation.
That's the main reason why sweet-state has selectors support: by coming from redux, or by using "fat" APIs, a larger(ish) store might still make sense but you won't be penalised by unnecessary re-renders. However we feel that React is moving towards more granular state, that is much easier to deal with, so hook composition might be a better pattern in the long term.

[gmol27]

Ok cool this makes sense, thanks very much for your response.