akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.62k stars 2.09k forks source link

Performance issue with clones (infinite) #2371

Open noudadrichem opened 2 months ago

noudadrichem commented 2 months ago

Hi!

Awesome port of Slick Slider. I'm loving it so far. However I have some (I guess very specific) questions. I hope someone is able to help.

I have some performance issues when using the infinite option. In that regard I have 2 questions. Where question 1 is: Why is the amount of total slides 7 when I have 3 with infinite on. Shouldn't 5 be enough? Having 1 slide before and 1 after?

The other being. I'm using Canvas in my slider to render "things". The rendering of Canvas is by default somewhat heavy on low end machines. Meaning that it could take from 400ms to 800ms to load this canvas on this 1 slide. Using the infinite setting meaning I have 7 slides for me now means that it has to compute the canvas 7 times. Is there an option to clone the slides after specific function is called or when any state is updated or something like that so I can optimise the performance? Meaning I only have to compute 3 slides and it clones after that is done? I'm now utilising the lazyload: 'progressive' which gives the results that I want visually. But on the back it still is duplicating network requests and drawing the canvas multiple times.

Scenario in CSB: https://codesandbox.io/p/sandbox/react-slick-playground-forked-rzwfgf?file=%2Findex.js

Love to hear. Ty