Why not render again?

[Pulset]

I changed the state, but I didn't render it again.Is this a bug or is this my misunderstanding?

This is my demo:
https://codesandbox.io/s/crazy-lewin-7rpy8w?file=/src/useListConfig.js

[dai-shi]

If I don't misunderstand, you simply assign the same object. useSnapshot is smart enough so that it optimizes re-renders. name and property.value don't change.

[Pulset]

The proxy tracks changes to the original object and all nested objects, notifying listeners when an object is modified.If I assign property a new object,it will not re-renders.

menuItems.forEach((item) => {
    if (item.menuItems) {
      item.menuItems.forEach((menuItem) => {
        if (menuItem.property && menuItem.property.key) {
          // assign a new object
          menuItem.property = {
            vlaue: statusValuesMap[menuItem.property.key],
            key: menuItem.property.key
          };
        }
      });
    }
  });

[Pulset]

When the entire object and nested objects return new objects,it will re-render.Does this mean that only changing nested objects cannot re-render?

[Aslemammad]

Hey Pulset!

Valtio is so smart at optimizing renders.
if you're tracking the property.key (as a string) and you change property's reference, or assign a new value to it, it would not cause re-render, since valtio knows that you care about only property.key, and not property itself or property.value as a whole.

Here's an explanation for your comments, I hope it helps you.

    // why not re-render ?
    // state[key] = [] will re-render: This will change menuItems (removes it), since valtio knows you care about this, it will re-render
    // state[key] = initData will not re-render: This is not changing anything, menuItems, menu.name and menu.property.value stay the same
    // state[key] = [...initData] will not re-render: same, valtio knows you care about menuItems for instance, but you're not changing menuItems and you're only changing the parent object reference. 
    // state[key] = JSON.parse(JSON.stringify(initData)): This completely destroys the references recursively. but if the tracked values are primitives only, nothing would happen.

[Aslemammad]

Let me know if this helps, and mark it as an answer if it did so other people would benefit from it.

If you have any other question, feel free to ask here.

[Aslemammad]

I just had a mistake in the comments that I just updated right now. Thank you @dai-shi for pointing this out.

[Pulset]

Hey Pulset!

Valtio is so smart at optimizing renders. if you're tracking the property.key (as a string) and you change property's reference, or assign a new value to it, it would not cause re-render, since valtio knows that you care about only property.key, and not property itself or property.value as a whole.

Here's an explanation for your comments, I hope it helps you.

    // why not re-render ?
    // state[key] = [] will re-render: This will change menuItems (removes it), since valtio knows you care about this, it will re-render
    // state[key] = initData will not re-render: This is not changing anything, menuItems, menu.name and menu.property.value stay the same
    // state[key] = [...initData] will not re-render: same, valtio knows you care about menuItems for instance, but you're not changing menuItems and you're only changing the parent object reference. 
    // state[key] = JSON.parse(JSON.stringify(initData)) will re-render: This completely destroys the references recursively.

// state[key] = initData will not re-render: This is not changing anything, menuItems, menu.name and menu.property.value stay the same
The original object has no value attribute and I care about this.Then I add the value attribute by assigning a brand new object.So it's different from the original.

[Aslemammad]

https://codesandbox.io/s/crazy-lewin-7rpy8w?file=/src/useListConfig.js:919-961

I don't see it empty before the assignment.

And please let me know where you think it was empty. And when do you want it to re-render?

[Pulset]

this property object is different

[Aslemammad]

 <p>{menu.property.value}</p>

You're tracking value and not vlaue!

[Pulset]

It's my mistake, I reworked it.But it still can't re-render

[Aslemammad]

@Pulset I just discussed this with Daishi, and he told me the reason.

This is because valtio caches proxies based initial objects. This is intentional design to leave initial objects unmodified (= proxy() is a pure function). Thus, modifying initial objects isn't recommended. This has been reported several times, and while the current design helps misusing, we can't opt-out the behavior. So, in v2, we changed the design and we don't pass initial objects, but we pass base objects instead, that will be modified (= proxy() is an impure function).
https://codesandbox.io/s/still-flower-q7jxj9?file=/src/useListConfig.js:1304-1361 Here's the example with v2.0.0-alpha.0.