[Question] large array element replace/update issue with observable object

[yanzou]

I have following js code:

import { observable, action } from 'mobx';  // mobx version "5.8.0"

class MyClass {
  @observable 
  public data = {
       id: "xxx",
       name: "yyy",
       myArray: []  // <----- this will stores some complex objects, not simple number/string elements
   };

  @action 
  public updateMyElems = (arr) => {
    this.data.myArray = arr;
  } 
}

const myClass = new MyClass();
const largeArr = [ ... ];  // 1000,000 elements in this array

myClass.updateMyElems(largeArr)     <--------- extremely slow 

the line myClass.updateMyElems(largeArr) it is extrmely slow, it takes most forever to finish this operation.
How can I avoid performance issue?

[yanzou]

I tried with a workround since I believe update the oberverable array is complicated / expensive operation:

@action 
public updateMyElems = (arr) => {
    const pureJsObj = toJS(this.data);

    pureJsObj.myArr = arr;
    this.data = pureJsObj; // bypass the internal complex logic for array 
} 

somehow I wonder is there a more elegance way instead this.

[mweststrate]

It depends all a bit on what you are trying to achieve. E.g. should the elements in the array be mutable? E.g. can elements in them be modified, or will they stay as is forever? In the latter case you probably want to use @observable.shallow and avoid converting all your data into observable data structures. See also https://mobx.js.org/observable-state.html#available-annotations

[yanzou]

@mweststrate

The code above was abstracted/simplified logic from a complex project, but from a high level, the thing I trying to do to is:

• MyClass.data (including data.myArray) is observing by tons of components / some @computed properties in this class and elsewhere.
• When the page is load 1st time, that array can be empty or contain some initail values
• There will be a GUI action triggered by user (button click or whatever make sense), a logic will generate 1000k new elements and replace the existing elements in the array.

I am gussing if use @observable.shallow, I possibly need to separate the array from data.myArray? some like

class MyClass {
  @observable 
  public data = {
       id: "xxx",
       name: "yyy"
   };

  @observable.shallow
  public myArray: any[] = [];
  ...

I am not sure if I can do this as I mentioned above it is a complicated project if I do so need a refectory on the project. But I think this is definitely a good direction, thanks a lot!

[mweststrate]

Quick check: Are you using 'action' on the event handler that triggers the changes? If not you really should

…

On Fri, Dec 6, 2024, 18:30 yanzou ***@***.***> wrote: @mweststrate <https://github.com/mweststrate> The code above was abstracted/simplified logic from a complex project, but from a high level, the thing I trying to do to is: - MyClass.data (including data.myArray) is observing by tons of components. - When the page is load 1st time, that array can be empty or contain some initail values - There will be a GUI action triggered by user (button click or whatever make sense), a logic will generate 1000k new elements and replaces whatever in the array. I am gussing if use @observable.shallow, I possibly need to separate the array from data.myArray? some like class MyClass { @observable public data = { id: "xxx", name: "yyy" }; @observable.shallow public myArray: any[] = []; ... I am not sure if I can do this as I mentioned above it is a complicated project if I do so need a refectory on the project. But I think this is definitely a good direction, thanks a lot! — Reply to this email directly, view it on GitHub <#3965 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBECAB2PPCCTUTAKNBL2EHNKTAVCNFSM6AAAAABTDWIPGKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNBYG42TGNQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[yanzou]

yes I am

@action 
public updateMyElems = (arr) => {
    this.data.myArray = arry;
}

[yanzou]

I finially relized it possibly not just the oberserable array itself but with other computed properties watching the data:

• If I run the simplified code (as my 1st comment) which dose not "connect" to UI layer, the operation is fast.
• but in the real code, MyClass is much much complicated, it has some other computed props oberserving the array, something like:

class MyClass {
  ...
  @action 
  public updateMyElems = (arr) => {
    this.data.myArray = arr;
  } 

  // some computed flag depends on `myArray`
  @computed
  public get isOneOfElementOk() {
       return this.data.myArray.find(ele  => ele.XXX.yyy.zzz === 'something' )
  }
  ....
}

According to mobx doc, the action internally already using the lower-level API like transaction / untracked...etc. I believe it is already optimized.
So my final solution possibly will introduce some sort of progress bar and insert into the array with smart trunk with some pause time, which is no idea but at least the page dose not freezed.

[yanzou]

Just a FYI
I found a very similar case in this discussion: #859 (comment)
hope this can help or give some clue anyone encounter same use case, that discussion have more insight/detail.