Memory leak when updating component state

[alexnivanov]

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9kEFPwzAMhf+KFSGtFVvKrlU3CYkLd445rHQedKJJ5LjlEOW/47SAKiZxi5+fv9gvqkfv9TSiqlUTOuo9Q0Ae/dHYfvCOGCJh23E/YYILuQE24t4Ya2znbBA3t4xwgB9XEc8ttzXElMrsGr3U+CRa8TALl9GK0VlYdTo3Wi4hGgsLUGeIUGNgquH0zEjtPHQXZ286pcwSN/JLP6AbuShKOBxvqHAP+3IL+/y5zDTVcqXcJwXj4D/ELhVAc+6nY4yrBbT8Dik1Ve7k2V+/2qolnt3Qen0NzkqA8/rmuxGMkhCykjXJLNdGvTP7UFdVuHQ59mvQjt4qeWmSZeUSjWHYvZL7DEgCNmq7YlQiTkg7QntGQvqP+cd6w81YCSSp9AVUw7au

Steps to reproduce

Make some component with reactive {data: {...}} state object, setup constant updates of data object.

What is expected?

Memory usage is constant (old objects should be cleaned by GC).

What is actually happening?

Memory usage grows and never stops.

System Info

OS: macOS Ventura 13.0.1
Browser: Chrome build 108.0.5359.124 (Official Build) (arm64)

Any additional comments?

In my original app I had updates by websocket, but it is easy to reproduce locally as well (see SFC example).

[LinusBorg]

This only happens when devtools are enabled. disable your extension and the heap stays nice and clean:

Vue Devtools enabled

Looking into these arrays, they come from the perf measuring data vue sends to the devtools:

Vue Devtools disabled:

@Akryum Can you have a look at this? should we move this to the devtools repo? Should this memory be freed by devtools? It happens regardless of wether I have the perf measuring disabled in the devtools.

[LinusBorg]

@alexnivanov If you see a lot of this in your app to the degree that its a problem, maybe evaluate how many re-renders you get from the incoming websocket data. re-rerendering in a really short interval will be expensive per-wise regardless of this devtools-dependent memory issue.

[alexnivanov]

@LinusBorg thanks, disabling dev tools helped indeed! I'll investigate the real app issue further. It's not that we are experiencing any performance issues, but the memory usage grows steadily (like 1-2 gigs per day), and the page crashes eventually...

[LinusBorg]

Do you see this in production? If so, that would be another story. What I found above related to code that is only present in the bundle during development, it would be tree-shaken in a production build.

If you only see it in dev: do you keep your dev-server and browser tab running for days without closing it?

[alexnivanov]

The original issue is in production. The memory still leaks without dev tools, even though not so badly. I still have to investigate the root cause though.

[LinusBorg]

The original issue is in production.

Then I suggest comparing heap snapshots like I did and reporting back what kind of elements are piling up.

The leaky behavior I identified with the code you shared is definitely happening in dev only, because of devtools. The relevant code is being treeshaken in a pro build and does not run in prod (I verified).

[alexnivanov]

@LinusBorg thanks for insight! I don't have this nice Objects allocated between... selector though :(

[LinusBorg]

Seems you picked the wrong option? You need to pick this:

[alexnivanov]

Thanks a lot, it helped to isolate the issue!

Good news is that it's not related with WS updates. It's about with Chart.js library integration: we have some charts that are updated regularly, and it's causing memory leaks.

This issue may be closed it seems. I'll investigate further and open a new one if it's related with Vue :)

[LinusBorg]

I'll close this here and will talk with Akryum about this on the devtools side.

[swolfish]

You saved my life! ❤️

[LinusBorg]

How so? 😅

[swolfish]

How so? sweat_smile

I had fixed the memory leak reported in the production but wasn't aware of it due to activated Vue Dev Tools. :(
Had cut the leak by ~40 percent but was struggling a lot to do it completely but unsuccessfully until found this one referenced by SO.
Thank you.