useSnapshot not updating when using useMemo

[Elia-Darwish]

Yesterday, I ran into this very weird behavior where I was updating en element in an Array.
useSnapshot was updating the values for the first element of the array that triggered the change and then not for the other elements (if I use subscribe to track the changes, it registers everything).

After digging into it for hours, I discovered it was caused by a useMemo in one of my components (removing that and deriving the value without useMemo solved the issue). I tried to replicate the issue on CodeSandbox with no success.
Now am at a point where the example is working just fine on CodeSandbox, but if I download the files and run it locally, it won't work until I remove the useMemo 😭

This doesn't make any sense to me and I feel that it's just a very stupid thing that I overlooked, and I would appreciate it very much if someone could take a look and see what's going on there.

The only difference is that I'm on an M1 MacBook, but I don't see how that can affect the behavior

Here is a link to the CodeSandbox:
https://codesandbox.io/s/valtio-nextjs-mqgwn?file=/pages/index.js

Thank you very much 🙏

[Elia-Darwish]

Here are also two screen recordings of the same behavior.

CodeSandbox:
https://res.cloudinary.com/elia-d/video/upload/v1640600873/github/sandbox.mp4

Local:
https://res.cloudinary.com/elia-d/video/upload/v1640600868/github/local.mp4

[dai-shi]

Yeah, proxy based tracking does not work well with React.memo.
https://github.com/pmndrs/valtio/wiki/Some-gotchas#using-reactmemo-with-object-props-may-result-in-unexpected-behavior

useMemo is the same too.

In your case, slices is an array which is wrapped with a proxy, so having that in useMemo prevents from correctly tracking the usage. This is very unfortunate. I ended up to educate about avoiding useMemo/memo with valtio.

Technically, we have an API for a solution https://github.com/dai-shi/proxy-compare/blob/main/src/index.ts#L276, but it's too hard to explain.

It is fine to use memo/useMemo for primitive values. So, the best is to destructure before using memo. Your use case can't do it, though.

[Elia-Darwish]

Thank you very much for explaining!

I suspected this was the reason. What threw me off was the fact that it's working on CodeSandbox like expected but not locally!
What is that about? 🤯

[dai-shi]

That was confusing to me too. tbh, I don't know.