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!

[john-d-pelingo]

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!

@fcolella GH-1456

Spotted this issue as well today. The leaks are huge.

[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.

updated: it's still ... so i have to remove it

[laminatefish]

I too am suffering with inner-slider.js increasing in footprints over prolonged duration. Does the above PR fix the issue? If so can it be merged? I'm going to have to find a replacement if not.

[erikmswan]

Just chiming in to say this is an existing issue in the latest release. I put this in a production application and now have to replace it after this bug surfaced it's head after hours of running. This is a deal-breaker for this library.

To give more info about my use case: this is for an app that is supposed to run 24/7. After a few hours of running, the below issue happens reliably. I assume it wasn't found as most webpages are just looked at for a short amount of time -- not enough time to leak enough memory to break it.

[raulfelix]

Hi I am wondering when this fix will be released. I see the last release was 5 months ago. Thank you

[phillipsheridan]

Just chiming in to say this is an existing issue in the latest release. I put this in a production application and now have to replace it after this bug surfaced it's head after hours of running. This is a deal-breaker for this library.

To give more info about my use case: this is for an app that is supposed to run 24/7. After a few hours of running, the below issue happens reliably. I assume it wasn't found as most webpages are just looked at for a short amount of time -- not enough time to leak enough memory to break it.

We are having the same issue. We were getting 12mb-15mb bloat every transaction for an app that runs 24/7. I made a custom component instead with hooks. But this issue is pretty nasty.

[jonny22094]

@akiran Any chance to release fix?

[Naqued]

@akiran do you think you will fix this leak ? we are thinking to change library since it can't work. The leak is huge.

Sad because the slider in itself is nice :)