Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

Awemcommented, Dec 2, 2019

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.

kidjp85commented, Jun 22, 2020

With newest version, getSwiper now is deprecated.

Read more comments on GitHub >

github_iconTop Results From Across the Web

"Error: Too many re-renders. React limits the number of ...
The reason for the infinite loop is because something (most likely setState ) in the event callback is triggering a re-render.
Read more >
Why is this code causing infinite loop rerender errors in react?
I am trying to calculate the total exercises in a course inside an array. Here is my component: - function Total({parts}) { const...
Read more >
Too many re-renders. React limits the number ... - Datainfinities
The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an...
Read more >
3 ways to cause an infinite loop in React - Alex Sidorenko
Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Here are 3 potential causes of the ......
Read more >
How to solve too many re-renders error in ReactJS?
“Too many re-renderers” is a React error that happens after you have reached an infinite render loop, typically caused by code that in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found