Subscribe on changes.

[nosferatu500]

I found it very useful to use useSnapshot(store) to re-render a component.

But when I using it like this

useSnapshot(store)
useSnapshot(store2)

render (
// other things
)

and modify 2 different stores at the same time, the above component will re-render 2 times. Are there any options to have the re-render fire once if both stores have changed?

[dai-shi]

How about this?

const { store1: snap1, store2: snap2 } = useSnapshot(useMemo(() => proxy({ store1, store2 }), []);

If possible, I'd define proxy({ store1, store2 }) outside component.

[dai-shi]

Then, create a combined store and make subscription (useSnapshot) scoped.

const state = proxy({...})

  // in a component
  useSnapshot(state)

  // in another component
  useSnapshot(state.foo)

So, the recommendation is to structure your state so that you can just have one useSnapshot in a component. You can use sub-stores just like separate store.

[nosferatu500]

Yes, I just tried your example with the combination useSnapshot(useMemo(), []) and it works (re-render time) much faster than when I used multiple useSnapshot.

Then, create a combined store and make subscription (useSnapshot) scoped.

I didn't know that I can do this! (maybe I just didn't found it in the documentation). Thank you for the explanations!

[dai-shi]

Well, useSnapshot(useMemo()) solution is something I made up just this time.
Again, the general recommendation is not to do it, but to create your store combined in the first place.

[nosferatu500]

I'm not sure, but maybe add a new rule to eslint-plugin-valtio to warn users about using multiple useSnapshots in a component?

[dai-shi]

Using multiple useSnapshots should not be that a bad thing, though.