Detached elements not garbage collected

[HEAVYPOLY]

Hi, I am trying to create an image gallery using vanX.list and running into an issue where dom elements are becoming detached and not garbage collected when removed from the reactive array, creating a memory leak.

Digging into this, I found that vanX.list seems to produce this effect even on vanX docs:

Even after clicking the chome garbage collect button, these detached nodes persist. Is there a way to get rid of these detached nodes?

[Tao-VanJS]

I spent some time trying to figure out what's going on. Here is what I found:

1. If I create a standalone app with just the TodoList, I can't reproduce the issue of detached node:

const {a, button, del, div, input, span} = van.tags

const TodoList = () => {
  const items = vanX.reactive(JSON.parse(localStorage.getItem("appState") ?? "[]"))
  van.derive(() => localStorage.setItem("appState", JSON.stringify(vanX.compact(items))))
  const inputDom = input({type: "text"})
  return div(
    inputDom, button({onclick: () => items.push({text: inputDom.value, done: false})}, "Add"),
    vanX.list(div, items, ({val: v}, deleter) => div(
      input({type: "checkbox", checked: () => v.done, onclick: e => v.done = e.target.checked}),
      () => (v.done ? del : span)(v.text),
      a({onclick: deleter}, "❌"),
    )),
  )
}

van.add(document.body, TodoList())

2. However, I did reproduce the issue in the complex page of VanX
3. Deep-diving into the retainers tree, what's in the tree totally doesn't make sense to me:

Here v is a State objective that should GC-ed. system / Context (I don't know what it is) which seems to be an opaque internal object retains v, which is further retained by V8EventListener.

It seems to me the state v is retained by a few internal Chrome stuffs. I don't know what they are. I think at this point it's beyond my expertise. Maybe this is due to how Chrome handles complex page internally.

If you happen to know what's going on, I'm happy to learn from you.

[Tao-VanJS]

Ha! I found the root cause!!

If I disable the gurubase widget and Google tag manager, I won't see the detached elements any more. So I think the memory leak is coming from gurubase widget and Google tag manager. I think these 3rd party scripts might have objects the hold references to DOM elements that are used to be part of DOM.

👎 to these 3rd party components that handle GC carelessly.

[HEAVYPOLY]

I've added the Todo app into my app (your code posted above) as a test, I'm still getting detached nodes after deleting todo items. I don't have gurubase or google tag manager in my project. I've also tried disabling any analytics libraries in my project. I can send heap file if that would help.

[HEAVYPOLY]

that being said, with a clean project + the todo app, there are no detached elements. I will keep digging to try to figure out what is holding on to these..

[HEAVYPOLY]

created a simpler version of my project without UI but including todo app:

[Tao-VanJS]

If you have a clean TODO app working while the GC doesn't work when the TODO app is mixed with your own page, you can try to bisect the problem by gradually removing various parts of your own page until the GC works.

[HEAVYPOLY]

Could a

1. Function
2. Dom elements
3. Class
   in state object cause this?
   vanX.reactive(new Layer)

const alerter = vanX.reactive({
text: 'This is an example message, would you like to confirm?',
cancel: true,
confirm: true,
confirmed: false,
input: false,
placeholder: '',
inputText: '',
show: false,
resolve: (val) => { alerter.show = false; prnt('alerter resolve', val) },
})

[Tao-VanJS]

I don't think the code you posted has anything to do with memory leak.

[HEAVYPOLY]

After much digging, I've found the code that was causing most of the detached nodes

      const stateFields = vanX.stateFields(PR)
      const skipFields = ['strokeSeed']
      Object.keys(stateFields).forEach(key => {
        if (skipFields.includes(key)) return
        van.derive(() => {
          // prnt(`${key} -> ${stateFields[key].val}`)
          const fake = stateFields[key].val
          PR.saveAppState()
        })
      })

I was trying to save this reactive object whenever any prop changed

[HEAVYPOLY]

More digging:
in van.js:
let gcCycleInMs = 10

setting a lower gcCycleInMs seems to solve some detached nodes (canvas nodes in this case)

It feels like sometimes bigger nodes with image data are not GCd correctly. It happens when I take memory detached nodes snapshot quickly after a large change in list items (many removed)