Setting a new array doesn't trigger an update

[bluedot74]

Hi,

I created a codesandbox to demonstrate the issue: https://codesandbox.io/s/valtio-simple-counter-forked-17yos?file=/src/App.js

Given a state like:

const state = proxy({ arr: ["hello"] });

Then accessing the array like so:

const list = useProxy(state.arr);

I would expect the component to rerender when I do something like this:

const handleClick = () => {
    state.arr = ["hello", "world"];
  };

However, it doesn't update.
It does update if I mutate the list like this: state.arr.push("world");.
But assigning a whole new array doesn't cause an update.

Am I just misunderstanding how it's supposed to work or is this a bug?

Thanks!

[bluedot74]

If I subscribe to the whole state object, instead of just the array within the state object it does update as expected:

const state = proxy({ arr: ["hello"] });
...
const myState = useProxy(state);
const handleClick = () => {
    myState.arr = ["hello", "world"]; // This works as expected.
};

[thelinuxlich]

Yeah, it's just a API misunderstanding

[dai-shi]

I understand this is a pitfall, but it's actually an expected behavior and a design choice.

The same thing happens if we do this:

let state = proxy(['hello'])

  // in component
  const snap = useProxy(state)
  const handleClick = () => {
    state = ['hello', 'world']
  }

So, the fact is dot-notation with state is not "scoping" but really selecting an object.

const snap = useProxy(state.arr)
// is equivalent to
const stateArr = state.arr
const snap = useProxy(stateArr)

This applies to subscribe too, and that's why subscribe doesn't work with non-objects. subscribe(state.str, ...) doesn't work.

---

I wonder if we can detect this and warn with eslint plugin. cc @Aslemammad

[bluedot74]

The same thing happens if we do this:

let state = proxy(['hello'])

  // in component
  const snap = useProxy(state)
  const handleClick = () => {
    state = ['hello', 'world']
  }

Ahhhh it's obvious when you put it like that. It "breaks" because I've completely overwritten the proxy object.
Looks like doing something like this is just as efficient anyway:

const { arr } = useProxy(state);

Thanks, ya'll!