Memory leak in render function

[ilyaliao]

Vue version

3.4.29

Link to minimal reproduction

https://stackblitz.com/~/github.com/CofCat456/vue3-render-function-memory-leak

Steps to reproduce

1. Use the render function to convert the Vue component to HTML.
2. Repeat the process.
3. Open memory panel in chrome devtools, then check total js heap size。

What is expected?

The memory should be released.

What is actually happening?

Sometimes, I need to convert a Vue component to HTML when using non-Vue libraries.

For example, when using google.maps.Marker, and I want to place a Vue component into the Marker title, I have to convert the component to HTML first to use it.

I use this method to convert it to HTML:

function outputHtml(title: string) {
  const vnode = h(
    SomeComponent, {
      title
    }
  )

  const node = document.createElement('div')

  render(vnode, node)

  return vnode.el as HTMLElement
}

However, I found that each time I call this function, it leads to an increase in memory usage.(107MB)

I need to add this line to solve the issue:

function outputHtml(title: string) {
  const vnode = h(
    SomeComponent, {
      title
    }
  )

  const node = document.createElement('div')

  render(vnode, node)

  // I need to add this line to release the memory in Node.
  render(null, node)

  return vnode.el as HTMLElement
}

I’m not sure if this is a bug, but I’ve seen many similar implementations online, and no one has mentioned needing render(null, node).

System Info

No response

Any additional comments?

No response