Adding to proxyMap or proxySet does not cause a rerender

[mattmag]

Bug Description

I'm not sure if I'm doing something incorrectly or trying something that is inherently unsupported, but I was surprised to find that adding to proxyMap and proxySet from any sort of callback does not seem to trigger a re-render.

This came up while handling the results of a firebase snapshot update which then added new items to a valtio proxyMap.

snapshot.docChanges().forEach((change) => {
  if (change.type === "added") {
    someProxy.items.set(change.doc.id, {
       name: change.doc.data().name,
       quantity: change.doc.data().quantity
    })
  }

After investigating, I found that I could not trigger a re-render from any sort of callback, useEffect, promise, etc, but that it does work as expected when adding items to plain-old arrays.

However, you can get items added to the map to show by causing a re-render through another avenue (such as another state change)

I've linked a simple working example in codesandbox but here is the gist...

const items = proxy<ProxyTest>({
  itemsArray: [],
  itemsMap: proxyMap(),
  itemsSet: proxySet(),
});

// ...

  useEffect(() => {
    const item = getRandomItem();
    items.itemsMap.set(item.id, item);
  }, []);

  return (
    // ...
    {Array.from(itemsMap.values()).map((item) => (
      <li key={item.id}>
        (x{item.quantity} {item.name})
      </li>
    ))}
  )

Update: After further testing it's not just asynchronously / in callbacks, I can't seem to get additions to show immediately at all, which is strange because in the docs, the To Do List Example works without issue. I've updated my codesandbox to add a "Add item immediately" button to showcase this

Reproduction Link

https://codesandbox.io/p/sandbox/sp2ptf

[dai-shi]

Is there a behavioral difference between v2.0.0 and v2.1.x?

[mattmag]

Just tested on 2.0.0 and adding items appears to trigger a render
2.1.0 shows the same behavior as 2.1.1 (the original version that I was working with)

Summary of proxyMap.set() and proxSet.add() behavior:

• 2.0.0 - triggers a rerender - 2.0.0 Sandbox
• 2.1.0 - does not trigger a rerender - 2.1.0 Sandbox
• 2.1.1 - does not trigger a rerender - 2.1.1 Sandbox

[overthemike]

2.1.x confirmed. I've been trying a few things to get this to work. So far I've been unsuccessful. I'll update if I figure something out.

[overthemike]

Update: After further testing it's not just asynchronously / in callbacks, I can't seem to get additions to show immediately at all, which is strange because in the docs, the To Do List Example works without issue. I've updated my codesandbox to add a "Add item immediately" button to showcase this

Update on my end: I still haven't figured out why proxyMap and proxySet iterators aren't reactive, however I do know why the todo-with-proxyMap example works - the examples are still using 2.0.0. If updated to 2.1.x, it ceases to work :(. I'm dropping all side stuff I have right now to try and dig into this as this is a pretty glaring problem. Any help on the investigation as to why this might be happening would be very much appreciated.

[overthemike]

Update: I figured out the issue. I'm implementing a fix for both proxyMap and proxySet and am going to write some new tests for this issue and then will push up.

[overthemike]

#988