[Bug] Lottie causes memory leaks when navigating with react-router

Tell us about your environment React SPA, using React-router for navigation.

Using lottie-web with a free animation from lottiefiles.com.

• Browser and Browser Version: Chrome for Windows v80.0.3987.149 (Official Build) (64-bit)

• After Effects Version: N/A

What did you do? Please explain the steps you took before you encountered the problem.

1. Go to page with animation
2. Navigate away from the page with a Link from react-router-dom
3. Navigate back to the animation-page, again through react-router

What did you expect to happen? I expected that the animation would play as normal with no issues.

What actually happened? Please include as much relevant detail as possible. Memory leaks occurs. I made som Heap-snaps with the following results:

Heap-snap 1: 34MB Heap-snap 2: 70 MB Heap-snap 3: 410 MB

Tried to look at the loaded data from the json file by using `JSON.stringify(animationJson) to see if it’s content changed (doesn’t make sense that it should, right?)

When I check the size of the json-data WITHOUT loading it with lottie, the data-size is constant at 37.2 KB. When I load it with lottie it grows to 2.3 MB on second render, 36 MB on third render and 174 MB on fourth render.

Seems like lottie changes the cached json data for each rerender of the component. I tried stop/destroy for the specific animation and for all through the lottie-object.

My code:

...
import lottie from 'lottie-web';
import theAnimation from './assets/the_animation.json';

...
const AnimationComponent = () => {

// Other code
  
  const animElement = useRef();

  useEffect(() => {
    console.log(JSON.stringify(theAnimation));

    console.log('fireworks mount');
    const anim = lottie.loadAnimation({
      animationData: theAnimation,
      loop: numberOfIterations,
      renderer: 'svg',
      container: animElement.current,
      autoplay: true,
    });

    console.log(JSON.stringify(theAnimation));

    return () => {
      anim.stop();
      anim.destroy();
      lottie.stop();
      lottie.destroy();
    }
  }, [])
}

Please provide a download link to the After Effects file that demonstrates the problem. I don’t have the AE-file, but this is the animation I used

[bodymovin]

Hi, this animation uses repeaters, which add up every time you use the same animation instance. I’d suggest that you import the data as a string and every time you load it, pass JSON.parse(animationString) as the animationData value.

[Kegulf]

Holy french pancake! (creppés)

It worked. You my good sir or ma’am are a HERO ❤️ Thank you!