Valtio reference wrong

[virsir]

import { useSnapshot, proxy } from "valtio";

const initState = {};

const state = proxy(initState);

export function ValtioStateTest() {
  const snap = useSnapshot(state);

  const handleClick = () => {
    const obj = { aa: 33, bb: 200 };
    state.obj = obj;
    setTimeout(() => {
      obj.aa = 190;
      obj.bb = 100;
      state.obj = obj;
    }, 1000);
  };

  return (
    <div>
      <div>{snap.obj ? snap.obj.aa : ""} </div>
      <div>{snap.obj ? snap.obj.bb : ""} </div>
      <button onClick={handleClick}> click </button>
    </div>
  );
}

snap.obj.aa is always 33, it would not change to 190, why?

[dai-shi]

Hi, this is one of the confusing points.
When you assign an object to a proxy, it automatically wraps with a proxy, which copies the object.

state.obj = obj
// that ☝️ is actually this 👇 
state.obj = proxy(obj)
// and proxy(obj) copies obj.

So, to make your code work as expected, you would need to do something like this:

  const handleClick = () => {
    state.obj = { aa: 33, bb: 200 };
    setTimeout(() => {
      state.obj.aa = 190;
      state.obj.bb = 100;
    }, 1000);
  };

[virsir]

It looks to me that Valtio does not support 're-set' an object/array to its proxy state.
It seems it has an internal cache which referenced the old object value, which seems a bug to me.

const state = proxy({});

export const setData = (data) => {
  state.data = data;
};

const data = { b: 1 };
setData(data);
data.b = 2;
setData(data);   //  state would not change(b is still 1), it is so weird.

In order to make my teammates understand this, and avoid this problem(set the same object twice), do you have any suggestion?

• eslint check?
• wrap any data into a cloneDeep before set into state? change all setXXX function to call cloneDeep first?
• or this is just a design flaw/bug, should be fixed ?

[dai-shi]

This is a design decision. If we take another approach, we will have another flaw.

I would suggest to avoid this pattern.

const data = { b: 1 };
setData(data);

and do this.

setData({ b: 1 });

But, it's not perfect.

change all setXXX function to call cloneDeep first?

That's also a good idea.
You could just deep-freeze the object, instead of deep-clone.

does not support 're-set'

It can be said a by product of optimization. For example:

const state = proxy({})
const obj = {}
state.obj = obj
state.obj = obj // we want to make this NO-OP to avoid notifying subscribers.