Allow normalization of results from computed properties

[Maaartinus]

I have a:

• Idea:
  • What problem would it solve for you?
    Reduced rendering.
  • Do you think others will benefit from this change as well and it should in core package (see also mobx-utils)?
    Everyone returning arrays or objects from @computed may benefit. It's no utility, just an option for @computed.
  • Are you willing to (attempt) a PR yourself?
    Not without getting a lot of help.

A simple property like

@computed
get firstTwo() : Array<Entity> {
    return this.entities.slice(0, Math.min(this.entities.length, 2))
}

gets recomputed every time any entity change and returns a new array, which is quite often equal to the previous value (this example is a big simplification of what happens in a real project). It'd be nice to have something like @computed(equals=myEquals), which would return the old value in case myEquals returns a truthy value.

This normalization is something, I can't do myself, as I have no access to the old value. An alternative could be providing some global mobx.oldComputedValue accessible during the execution of the getter body.

[danielkcz]

Well, you don't have immediate access to the previous value, but I believe something like this should work, right?

class {
  firstTwoMemo = []
  get firstTwo() : Array<Entity> {
    const newValue = this.entities.slice(0, Math.min(this.entities.length, 2))
    if (newValue !== this.firstTwoMemo) {
      this.firstTwoMemo = newValue
    }
    return this.firstTwoMemo
  }  
}

I suppose it might be more convenient having it in MobX, but unless you are willing to come up with PR, I think you will have to do with this solution.

[urugator]

@computed({ equals: myEquals })

https://mobx.js.org/refguide/computed-decorator.html

Options for computed

equals: By default comparer.default. This acts as a comparison function for comparing the previous value with the next value. If this function considers the previous and next values to be equal, then observers will not be re-evaluated. This is useful when working with structural data, and types from other libraries. For example, a computed moment instance could use (a, b) => a.isSame(b)
comparer.structural comes in handy if you want to use structural comparison to determine whether the new value is different from the previous value (and as a result notify observers).

EDIT: for arrays/objects you can use @computed.struct shorthand

EDIT2: oh actually, I am not sure if decorator accepts options... but you can create standalone computed and use it from getter:

get firstTwo() {
  return this.firstTwoComputed.get();
}

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.