bind + memoize?

[benallfree]

I have a state object with deep nesting, and certain components only rely on certain paths in the object. bind picks up changes any time the object reference changes, but that doesn't necessarily mean a given component needs to render again.

Do you have suggestions for this situation?

edit: I know state vars cannot be nested, and I'm looking for a way to tell bind it doesn't need to do any work even though the state var it was watching changed.

[Tao-VanJS]

In idiomatic VanJS code, we recommend defining states at the leaf-level of the global state object, which means instead of having:

const s = van.state({
  a: 1,
  b: 2,
})

you can have:

const s = {
  a: van.state(1),
  b: van.state(2),
}

This way you will have the ability to bind smaller components to each individual field path.

[benallfree]

Sure, but then you lose the ability to bind higher up. Sometimes that is necessary for parent components. If bind could accept a custom comparison function while leaving the reference comparison as the default, that would be perfect.

I’m open to ideas. Sometimes a custom deep value comparison rather than a reference comparison can save the day :)

[Tao-VanJS]

You can do nested states in this case:

const s = van.state({
  a: van.state(1),
  b: van.state(2),
})

[Tao-VanJS]

Alternatively, you can use Object.assign to do field-level state updates, something like:

const s = {
  a: van.state(1),
  b: van.state(2),
}

// To update `s` with values in `newS`
Object.assign(s, newS)

Note that the states won't be considered changed if their underlying values remain the same.

You can define your custom deep assignment functions if you need to.

[benallfree]

The value of the State object cannot be a DOM node, or another State object.

Ah, I see now. I didn't even try nesting because I thought it wasn't allowed. Thanks! This solves the whole thing.

[Tao-VanJS]

It doesn't make too much sense for state object to directly hold another state as val. However, it could be beneficial for them to hold objects with states as fields.