Confusion re: v2

[beaugunderson]

This is very confusing:

It is unclear what "reusing obj" means, it is not defined in the rest of the documentation.

It is further unclear what "reusing the object" means. The documentation shows examples of setting attributes on state, and it's unclear how setting obj to a new value won't work.

[dai-shi]

Thanks for pointing it out. It's actually confusing. Let me try to improve it.

[dai-shi]

#939

[hastebrot]

For me this is still confusing. How I understand it, the problem does not happen when you only use state (as defined in my example below) and don't touch object. the problem happens when you make changes to object which is also used in a proxy by state.

this means it's a change in behavior that will for most users of valtio not cause any problems, if they only use the proxy()-ied object.

@dai-shi do you think this is the correct interpretation?

import { proxy } from "valtio";
import { deepClone } from "valtio/utils";

const object = { count: 1, message: { text: "hi" } };
const state = proxy(object);

state.message.text = "hello"; // (1) this is fine.
state.message = { text: "hello" }; // (2) this is fine.
state.message = object.message; // (3) this is fine.

// (4) don't do this.
state.message = object.message;
object.message.text = "howdy";

// (5) this is fine.
state.message = deepClone(object.message);
object.message.text = "howdy";

---

it's still strange. when I modify object.message.text directly, the change is also reflected in state.message.text, despite I used deepClone(object.message). object.message.text and state.message.text have the value "howdy".

// (5) this is fine.
state.message = deepClone(object.message);
object.message.text = "howdy";

---

so when you interact with object in any way, you should deepClone() it. following works fine.

const object = { count: 1, message: { text: "hi" } };
const state = proxy(deepClone(object));

[dai-shi]

the problem happens when you make changes to object which is also used in a proxy by state.

Not exactly. The problem happens if you don't make changes.

state.message = object.message; // (3) this is fine.

Exactly this. This is not fine. This is NO-OP.

it's still strange.

I think you got it?
proxy(obj) mutates obj.

const innerObj = {};
const obj = { innerObj };
const state = proxy(obj);
console.log(state.innerObj === innerObj);
console.log(state.innerObj === obj.innerObj);

so when you interact with object in any way, you should deepClone() it.

Yeah.
If you have suggestions to improve the docs, feel free to send a PR.

[overthemike]

I took it to mean not to reuse objects you pass into the proxy function. For example, if you use composition to create multiple state objects and you reuse the same initial state object reference, it might bite you.

Example:

const initialState = {
    id: null,
    name: '',
    description: ''
}

const createItemState = () => {
    const state = proxy(
        initialState, // not a good idea
        addItem: () => state.ideas.push(createIdeaState())
    )

    return state
}

I'm not sure if this a correct interpretation or not. I haven't had a chance to play around with it or look into the new version yet. I do agree that the description / examples could be a bit less ambiguous.

[dai-shi]

Does this help?

const innerObj = {};
const obj = { innerObj };
const state = proxy(obj);
console.log(state.innerObj === innerObj);
console.log(state.innerObj === obj.innerObj);