React virtual slide should not update all slides on every slide change

[jasonchoimtt]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-react-virtual-slides-86n5ny?file=%2Fsrc%2FApp.jsx%3A55%2C27

Bug description

When using the virtual module in Swiper React, as the user moves to a new slide, all the slides are updated, which creates a performance issue when somewhat complex slides are used. The reason is that the virtual module always assigns keys to the slide starting from 0.

For example, say initially slides A - C are rendered. Currently, Swiper will render something akin to this:

<swiper>
  <slide key={0}>A</slide>
  <slide key={1}>B</slide>
  <slide key={2}>C</slide>
</swiper>

Suppose the user swipes the slides and now slides B - D are rendered. Then Swiper will render:

<swiper>
  <slide key={0}>B</slide>
  <slide key={1}>C</slide>
  <slide key={2}>D</slide>
</swiper>

Due to how React's virtual DOM works, it will re-render the all three slides with each one's new content. A more efficient way would be to render:

<swiper>
  <slide key={1}>B</slide>
  <slide key={2}>C</slide>
  <slide key={3}>D</slide>
</swiper>

Then React will be able to detect that slides with keys 1 and 2 have the same content. If slide was a memo'ed component it would not be re-rendered.

---

The key used in virtual DOM is added in here, and based on the history it was added to fix an issue with loop and virtual slides. If we simply removed this line, it should fix the above problem but probably create a regression on the linked bug.

Thanks for looking at the issue.

Expected Behavior

When a slide moves around, it should not necessitate an update on it. The React key should be stable for the same virtual slide content. It may be seen by the counter each in slide shown in the reproduction link. The counter should not increase for all visible slides every time the user moves the slide.

Actual Behavior

All the slides are updated every time the set of visible slides changes. Namely, an instantiated slide (with a specific key) will change from one slide content to another. It may be seen by the counter each in slide shown in the reproduction link. The counter increases for all visible slides every time a new slide becomes visible.

Swiper version

11.0.6

Platform/Target and Browser Versions

macOS / Firefox 121.0.1

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR