Constate + valtio + any hook

[Evalon]

Hey! I want to share the quick (sketch) solution for small storage that depends on some props, other hooks (react-query in mind), and combinations of them (projections).

The problems I want to solve:

1. I want to share props, simple hooks, libraries based on hooks (react-query, without direct cache access), and values derived from them
2. I don't want to create a context for every value I want to share
3. I don't want to create a selector for every usage of value or create memoized components layer every time I use context

codesandbox: https://codesandbox.io/s/intelligent-water-b0g7m?file=/src/App.tsx

So, I just compare props (shallow) in useEffect and change only the changed ones (This is a common pattern for proxy based storage (mobx, valtio)) and provide proxy object to the provider.

The implementation is a little too simple maybe and if you have ideas about this I appreciate the feedback.
But what do you think about the general pattern to use valtio like this? Maybe you have some pitfalls in mind.
I know that valtio will use useMutableSource in the future and deopt sometimes, but it's okay for my cases I think.
(Constate has been chosen just for quick example.)

Thank you!

[dai-shi]

While valtio is fine to be used with React Context (and useConstant is good in this case), I don't see this makes use of the "mutation" style of valtio. If I were to do something like this, I'd use react-tracked, which probably would simplify things a lot.

[Evalon]

Yeah, probably it is, because in fact, what I want is to bail out when the subscribed value in the object hasn't changed so the solution should be connected to changedBits + proxy... I thought about react-tracked, but started from valtio.
Thanks for the advice and great libraries!