React-id-swiper: rebuildOnUpdate and shouldSwiperUpdate not work properly in version 2.1.1

[damiancompetec]

unfortunately those props do not work properly in the latest version.
e.g. I have gallery:

I remove 13'th slide and I get:

and now i can't get realIndex = 13 (it is necessary for me, because I use this value to mark current, appropriate thumbnail)

[ntucakovic]

How did you remove the 13th slide? I've had an issue with updating slides on a single swiper instance (updating images which are Swiper children, from which I generate slides).

Ended up implementing useEffect() which watches for changes on the images array, and there I do swiperInstance.update(). Couldn't make use of shouldSwiperUpdate nor rebuildOnUpdate (which shouldn't be used in this case, as the original API supports updating Swiper w/o rebuilding).

[saintego]

There seems there is bug in

  // Execute each time when props are updated
  useEffect(() => {
    if (swiper !== null) {
      if (rebuildOnUpdate) {
        rebuildSwiper();
      } else if (shouldSwiperUpdate) {

swiper is always null here

[pcegarra]

Same problem here, any idea of how to fix it?

[dahvinchee]

adding observer: true in your params should do the trick: https://stackoverflow.com/questions/50805404/react-swiper-with-dynamic-content per dimidrol dimidrola answer

[fkloes]

I think the reason that swiper equals null here is, that the swiper instance is not preserved within the component state.

At the top of the function, swiper is initialized with null. Due to how the effects are defined, it will only be assigned with a swiper reference when the component "mounts". When updated props come in, the function runs again, but swiper is not assigned with a reference this time when the code from the 2nd effect run.

So i would propose to replace

let swiper: SwiperInstance = null;

with (sorry... i don't know how to annotate this in TS)

const [swiper, setSwiper] = useState(null);

buildSwiper() and destroySwiper() now need to invoke setSwiper() instead of assigning swiper directly. This will preserve the instance within the component state, so that it's available again when props update.

[kidjp85]

@All: Sorry for my late response, so busy recently. I made a fix for this issue in v2.3.1.

[OrenSchwartz]

im using version 2.3.2 and still encountering this (very annoying :( ) issue.