Unnecessary loops causes low performance, how to optimize the performance

[hardylab]

I am developing an outlining note-taking tool based on react and mobx-keystone, and I encouter a problem: when the outline tree grows too large (with about 2000 nodes), every action handled by mobx-keystone is rather slow, I debug it via "chrome performance", and locate the slow part of mobx-keystone as follow:

// 'coreObjectChildren.ts'

const updateDeepObjectChildren = action((node: object): DeepObjectChildren => {
  const obj = getObjectChildrenObject(node)!
  if (!obj.deepDirty) {
    return obj
  }

  const data: DeepObjectChildren = {
    deep: new Set(),
    extensionsData: initExtensionsData(),
  }

  const childrenIter = obj.shallow.values()
  let ch = childrenIter.next()
  while (!ch.done) {
    addNodeToDeepLists(ch.value, data)

    const ret = updateDeepObjectChildren(ch.value).deep
    const retIter = ret.values()
    let retCur = retIter.next()
    while (!retCur.done) {
      addNodeToDeepLists(retCur.value, data)
      retCur = retIter.next()
    }

    ch = childrenIter.next()
  }

  Object.assign(obj, data)

  obj.deepDirty = false
  obj.deepAtom.reportChanged()

  return obj
})

Each action will trigger the loop 'while (!ch.done)', in a 2000-nodes model tree, the loop count can be up to 50000 times.

according to the above information, how can I optimize the performance ?

[xaviergonz]

could you please provide some example code that shows this behavior?

[xaviergonz]

Closing due to lack of info, feel free to reopen