How to modify array nested in objects using proxyWithComputed?

[homiebtc]

Hi,

I'm trying to use proxyWithComputed but I am not sure how to modify arrays nested in objects. Here is an example that works without using proxyWithComputed. https://codesandbox.io/s/peaceful-poincare-5n600?file=/src/App.tsx.

The state consists of selectedPageIndex and an array of page objects. Each page object consists of an array of row objects, and each rowobject consists of a title string and selected boolean. If the user clicks on a row object, it should swap the selectedattribute. The example above works just by getting the selectedPage within the App component:

const state = proxy<State>({
  pages: [
    {
      rows: [
        { title: "Page 0 Title 0", selected: false },
        { title: "Page 0 Title 1", selected: false }
      ]
    },
    {
      rows: [
        { title: "Page 1 Title 0", selected: false },
        { title: "Page 1 Title 1", selected: false }
      ]
    }
  ],
  selectedPageIndex: 0
});

export default function App() {
  const snap = useSnapshot(state);
  const selectedPage = snap.pages[snap.selectedPageIndex];
}

I would like to have selectedPage be part of the state object, like so:

const state = proxyWithComputed<State, ComputedState>(
  {
    pages: [
      {
        rows: [
          { title: "Page 0 Title 1", selected: false },
          { title: "Page 0 Title 2", selected: false }
        ]
      },
      {
        rows: [
          { title: "Page 1 Title 1", selected: false },
          { title: "Page 1 Title 2", selected: false }
        ]
      }
    ],
    selectedPageIndex: 0
  },
  {
    selectedPage: {
      get: (snap) => snap.pages[snap.selectedPageIndex],
      set: (snap, newValue) => {
        snap.pages[snap.selectedPageIndex] = newValue;
      }
    }
  }
);
export default function App() {
  const snap = useSnapshot(state);
  // I can access selectedPage using snap.selectedPage
}

However, how do I modify objects nested in state.selectedPage here? I am not sure how to change the set function to accomplish this. Here is the code sandbox for proxyWithComputed https://codesandbox.io/s/weathered-morning-4qlre?file=/src/App.tsx:729-915. I am not able to add rows or change the selected attribute on click.

Thanks in advance for your help!

[dai-shi]

Hi, this is interesting. I mean I learn the real use case.
While I understand your mental model, proxyWithComputed doesn't work like that. I mean it's very limited for your use case.
Computed values are created from snapshot, so it's a clone of original state. That's why you can't modify them.

So, the answer is proxyWithComputed doesn't support it, unfortunately. I feel like it's very limited in this sense. But, there would still be certain use cases. So, it would be a doc issue. Think it more like proxyWithComputed is provided instead of useSnapshot. (And, I admit the name is not good, but it was half intentional.)

Would you try derive to see if it fits better for your use case?

[homiebtc]

Thanks for the quick reply! Could you explain some more differences between 'derive' and 'proxyWithComputed'? Is 'derive' not a clone of state?

[dai-shi]

Is 'derive' not a clone of state?

No, unless you do something in your function. derive doesn't do anything. It doesn't use snapshot.

---

derive is a simple wrapper around subscribe. It's something like this:

const state = proxy({ count: 0, text: 'hello' })
subscribe(state, () => {
  state.doubled = state.count * 2 // this will be re-evaluated even if only `text` changes.
})

This will actually cause infinite loop, but derive handles it.

Whereas, proxyWithComputed uses more internal feature (i.e. object getters).
It's conceptually like this, and it's why I basically recommend it for vanilla users.

const state = proxy({ count: 0, text: 'hello' })
const getStateWithComputed = () => {
  const snap = useSnapshot(state) // can't do this actually
  const doubled = snap.count * 2 // this is re-evaluated only if `count` is changed
  return { ...state, doubled }
}