rebuildOnUpdate causes errors in conjunction with setSwiper because of infinite rerender loop

Setting rebuildOnUpdate to cause Swiper to take into account changes in props on render causes errors within swiper.

swiper.esm.bundle.js:1306 Uncaught TypeError: Cannot read property 'slidesPerGroup' of undefined
    at Swiper.slideTo (swiper.esm.bundle.js:1306)
    at eval (contents.tsx:40)
    at eval (contents.tsx:45)
    at commitHookEffectList (react-dom.development.js:17283)
    at commitPassiveHookEffects (react-dom.development.js:17307)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitPassiveEffects (react-dom.development.js:18774)
    at wrapped (scheduler-tracing.development.js:207)

When I removed getSwiper={setSwiper} it worked perfectly well (but I need that swiperInstance in my parent component). When I add it back, but use a totally stripped back Swiper with no props other than rebuildOnUpdate and getSwiper with nothing happening to that swiper, the error goes away, but I noticed that there is an infinite render loop causing my console logs to fire repeatedly, so I decided to investigate that.

In your code it looks like in rebuildSwiper, both buildSwiper and destroySwiper are calling getSwiperInstance which causes a rerender in my parent component, which causes Swiper to rerender, causing that useEffect to fire again, causing rebuildSwiper to run once again etc. etc.

When I set stricter deps in that useEffect, that infinite rerender stops happening and the error goes away.

If you’d like, I can do a fork and create a pull request with my fix?

[Awem]

The render loop does not occur anymore. But getSwiper does still not work properly with rebuildOnUpdate because it will always set the Swiper instance to the destroyed instance.

[kidjp85]

With newest version, getSwiper now is deprecated.