Adding more slides via infinite scroll causes the carousel to reslide

[RyanPaiva56]

• pure-react-carousel version: 1.27.6
• react version: 17.0.1
• browser used: Version 87.0.4280.88 (Official Build) (64-bit)
• node version: v14.15.1

Relevant code or config:

My carousel:

<CarouselProvider
  naturalSlideWidth={100}
  naturalSlideHeight={100}
  totalSlides={albumPhotos.length}
  isIntrinsicHeight
  currentSlide={startingSlideIndex}
>
  <PhotoSlides albumPhotos={albumPhotos} />
  <PhotoSlidesContext onSlideChange={(index: number) => { onSlideChange(index) }} />
</CarouselProvider>

My slides:

export default function PhotoSlides({ albumPhotos }: Props) {
  return (
    <Slider className={styles.CarouselSlider}>
      { albumPhotos.map((albumPhoto: Photo, index: number) => {
        return (
          <Slide index={index} key={albumPhoto.id} className={styles.CarouselSlide}>
            <PhotoSlide photo={albumPhoto} />
          </Slide>
        )
      })}
    </Slider>
  );
}

What you did:

Add more slides via infinite scroll.

Problem description:

The slider freaks out for a second and returns to the correct current slide.

Gif/video example:

Suggested solution:

My thought was maybe this is happening because the index of the current item was changing, switching the Slide index=x to use to us the ID on the object instead of the index of the array didn't help:

export default function PhotoSlides({ albumPhotos }: Props) {
  return (
    <Slider className={styles.CarouselSlider}>
      { albumPhotos.map((albumPhoto: Photo, index: number) => {
        return (
          <Slide index={albumPhoto.id} key={albumPhoto.id} className={styles.CarouselSlide}>
            <PhotoSlide photo={albumPhoto} />
          </Slide>
        )
      })}
    </Slider>
  );
}

[tim-steele]

@CitizenBeta this doesn't look like a "freakout" - it looks like it is doing a re-render. You are adding new Slides to the Slider as you are navigating through it?

[RyanPaiva56]

@tim-steele Freakout is probably a bad term to use here, my apologies haha. I think your analysis of a re-render is accurate; however, it is keeping the correct slide in focus once it finishes, and it's not resetting to the on-mount "currentSlide" so in my head it wasn't a full reset. Yes, I am adding new slides as I navigate. Once I get within 6 of the end, I add more to the end of the carousel.

[tim-steele]

It doesn't need to do a reset of the state (currentSlide) - but it looks like when you are adding slides, it is forcing a re-render.

[RyanPaiva56]

@tim-steele is it possible to prevent that? Or pause animations or checking until after the additional slides are added? The current slide isn't changing, so I'm not sure why it would need to re-render.

[tim-steele]

This isn't really a bug. We don't currently have a built-in way to do infinite scroll the way you are attempting to implement it.

The container is re-rendering because you are adding additional slides, and using map which returns a new array, which is going to cause the data to differ and cause the re-render. If you didn't use map, you would be mutating an existing array, which is an anti-pattern and React wouldn't necessarily know to render the new slides.

I am going to move this to a discussion, where people can discuss this infinite scroll solution.

[RyanPaiva56]

I guess to ask the question, is there another best practice towards having 1000+ slides?

[tim-steele]

@CitizenBeta we have an infinite mode that takes you back to the beginning. This particular functionality we would be open to a pull request. I am not quite sure how it would be solved.

[RyanPaiva56]

I dont think the infinite mode is the same thing as infinite scroll. In this case it's really more of a limited scroll. The actual use case is using the carousel to view an album with 1400 photos. To load all of them at once seems kinda expensive. Loading 12 at a time seems like a good decision.

[SectumSempraAS]

I am also facing the same problem. After the object gets updated, the css properties width and translateX() gets updated with some delay time. Maybe that is causing the resliding. @CitizenBeta