kidjp85 / react-id-swiper

A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build
https://react-id-swiper.ashernguyen.site/
MIT License
1.49k stars 154 forks source link

Swiper appears to cause detached elements and events on SPA #473

Open Marvin-Brouwer opened 3 years ago

Marvin-Brouwer commented 3 years ago

I can't really reproduce this because I'm not sure what's causing this. However, I can see the following on our SPA:

When we browse a couple of pages on our SPA we see the amount of detached elements rise including: Constructor Distance Shallow size Retained size
...redacted -- -- --  --
Detached HTMLDivElement×290 4 8 1200 % 39 5080 %
...redacted -- -- --  --
Detached SVGAnimatedLength×12 13 00 % 00 %
Detached SVGAnimatedNumber×3 14 00 % 00 %
Detached SVGAnimatedPreserveAspectRatio×3 13 00 % 00 %  
Detached SVGAnimatedRect×3 13 00 % 00 %
Detached SVGAnimatedString×6 13 00 % 00 %
Detached SVGAnimatedTransformList×6 13 00 % 00 %
Detached SVGPathElement×3 13 00 % 00 %
...redacted -- -- --  --
Detached NodeList×12 21 840 % 840 %
...redacted -- -- --  --

The HTMLDivElement contains the react elements we've put inside of the swiper. The SVG.... elements suspect to me that it has to be some component that animates (which may be the swiper or maybe something inside there) If I inspect the NodeList items I can see this: image It appears that the Swiper component is not removed when routing to another page. This may or may not be an incorrect use of the library but I can't seem to figure out what we're doing wrong.

Is there perhaps a setting to indicate this is used on an SPA or do we need to call something to make it unmount?