O(1) Performance of editing member of observable array vs vanilla react

[1mike12]

So an interesting question popped up. I almost never messed around with immutable before. I went from default react states back in 2016, then recently came back and used mobx in 2021. The default way to do updates on an element of an array would be:

class Example extends Component {
  constructor(){
     this.state = {array: [{name: "bob"}, {name: "john"}]}
  }
  changeName(index, name){
     const array = array.slice()
     array[i].name = name
     this.setState({array})
  }
}

We have an O(n) operation to make an entirely new array via slice in order to change the reference when React makes its shallow comparison pass.

In mobx, we can modify arrays directly inside our actions. Is that modification O(1), or under the hood is there fundamentally also an O(n) operation?

[mweststrate]

O(1)

…

On Thu, 10 Nov 2022, 16:13 Michael Qin, ***@***.***> wrote: So an interesting question popped up. I almost never messed around with immutable before. I went from default react states back in 2016, then recently came back and used mobx in 2021. The default way to do updates on an element of an array would be: class Example extends Component { constructor(){ this.state = {array: [{name: "bob"}, {name: "john"}]} } changeName(index, name){ const array = array.slice() array[i].name = name this.setState({array}) }} We have an O(n) operation to make an entirely new array via slice in order to change the reference when React makes its shallow comparison pass. In mobx, we can modify arrays directly inside our actions. Is that modification O(1), or under the hood is there fundamentally also an O(n) operation? — Reply to this email directly, view it on GitHub <#3569>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBEMLBH7ZEIBM2PA2ILWHUGJHANCNFSM6AAAAAAR4VGG2U> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[kubk]

Also Redux has O(n) for number of subscribed components while Mobx has O(1): https://twitter.com/dan_abramov/status/719973322453348352?lang=en

[1mike12]

Wow crazy, that's awesome.