[react-jss] Memory leak from CSS transforms

[HenriBeck]

From @josh-stevens on June 1, 2018 19:29

Hi,

So I'm doing a long running animation using CSS transforms. It's a digital signage application so this is something that runs for hours on end. After about 12 hours or so, the application was eating 2.5GB of memory.

I did some profiling and it looks like JSS is the culprit. Here's a picture of what it's holding onto after 5 minutes.

There are only 8 objects with their styles being updated. It updates the props every animation frame so about 60 times per second. Once those styles have been applied for their frame, they aren't needed anymore and should be discarded/gc'd. But as shown in the screenshot, I'm looking at Snapshot 6 (taken 5 minutes after Snapshot 1) and it's holding on to all those strings allocated between Snapshot 1 and Snapshot 2.

If I remove JSS from the equation and do the transform as an inline style, the snapshots don't blow up the way they do here. That's a fine workaround for my purposes, but thought I would at least raise the issue here. Why is JSS holding onto all the strings it creates?

Copied from original issue: cssinjs/react-jss#253

[HenriBeck]

From @kof on June 1, 2018 19:36

Hey, an interesting issue, but I doubt we can look into it without any reproducible example.

[HenriBeck]

From @josh-stevens on June 1, 2018 19:46

Sure, I'll try to put together a simple example when I have a moment.

[HenriBeck]

From @kof on June 1, 2018 19:48

Ideally with the least amount of dependencies. For e.g. if you can make a demo with just jss without any integrations or plugins, that would be easier to track down.

[HenriBeck]

So you are using functional values, right? Can't you do the transform with css animations?

_{Sent with GitHawk}

[HenriBeck]

From @kof on June 19, 2018 20:0

@josh-stevens any updates?