Memory Leaks!

[HarryFaulkner]

Getting pretty consistent memory leaks, increasing browser memory footprint by around 0.5-5mb every render. I have a maximum of 100 items in my carousel which is dynamically updated every 10-40 seconds.

As you can imagine, after a while the page crashes.

I noticed the original library has had a similar issue https://github.com/kenwheeler/slick/issues/1380

Anyone help with this matter would be much appreciated.

[HuntBurdick]

Having similar issues.. I love this plugin but I had to remove because of consistent memory leaks. It left detached elements in the DOM tree that grew exponentially over time.

[akiran]

Is it happening in a particular scenario ?
Can you give a code snippet to replicate this issue

[HuntBurdick]

It could be specific to my scenario, it's hard to say. I'll see if I can setup a fiddle this weekend to reproduce. Thanks.

[yarsanich]

Hi, @HuntBurdick any progress with reproducing with js fiddle?

[HuntBurdick]

I've been super slammed at work and haven't been able to create a fiddle to try to reproduce. I am using react-slick in our production website (edealerdirect.com) and I am seeing memory issues that I believe stem from a conflict between react-slick and either lazy loading components or some jQuery dependencies.

[endze1t]

Greetings, I also struggle with memory leaks. I'm using a custom solution for autoplay, because i want animated dots. If i'm using setInterval, the ram will leak pretty fast.

Here is a simple example from the Playground code. Just open Chrome Developer Tools and go to Memory and see how the MB all the time rises.

I think the issue came from this.setState()

https://codesandbox.io/s/mzm67r7l6p

[endze1t]

Hello,

i probably found the source of the memory leak it's the function checkImagesLoad()
https://github.com/akiran/react-slick/blob/master/src/inner-slider.js#L298

After removing this function in componentDidUpdate(), the memory leak is gone.

[yarsanich]

@endbay you are right! Reproduced.

[yarsanich]

Memory leaks were caused by arrow functions used for onlick and onload.

[quocthangit247]

Hello,

i probably found the source of the memory leak it's the function checkImagesLoad()
https://github.com/akiran/react-slick/blob/master/src/inner-slider.js#L298

After removing this function in componentDidUpdate(), the memory leak is gone.

i'm newbie. Can you give me a code to remove that function ? Thanks.

[akiran]

@quocthangit247 Can you give us code snippet to replicate the memory leak .

Also can post the memory profiler snapshot before and after disabling componentDidUpdate

[quocthangit247]

@quocthangit247 Can you give us code snippet to replicate the memory leak .

Also can post the memory profiler snapshot before and after disabling componentDidUpdate

i use to display some pictures after that i see that chrome dev have warning and loop until no see. i don't know how to explain for you but this issue like ENDBAY. I have a solution for that is using lazyLoad in settings. it disappear when i add lazyload option.

[Bligoubloups]

Hello !
I can reproduce this error consistently.
In the function _this.checkImagesLoad() in the file inner-slider.js I write a console.log("checkImagesLoad").
Then slide your pictures. When you have approximately 1500 "checkImagesLoad" Firefox's console will tell you an error.

I have 10 items in my carousel

[fcolella]

Hey guys! any update on this? I'm hunting for memory leaks in my app as well and Chrome DevTools is also pointing towards inner-slider.js
Thanks!