What happens when React rerenders? - reactjs

Question

I have the following code and you can view it on codeSandbox:
import "./styles.css";
import lottie from "lottie-web";
import { useEffect, useRef } from "react";
import logo from "pic";
export default function App() {
const el = useRef(null);
useEffect(() => {
if (el != null) {
lottie.loadAnimation({
container: el,
renderer: "svg",
loop: true,
autoplay: true,
animationData: logo
});
}
}, []);
return (
<div className="App">
<div ref={el}></div>
</div>
);
}
Lottie is just some library to render animation. The problem I have with it is that while I am in the developing phase, if I make some modification to the second div tag, then React rerenders without destroying the previous animation and in the meanwhile create a new animation below the original one. I am aware that one has to add some effect clearing logic in useEffect but I just do not see why.
I am new to React and only have a very basic understanding of how React works in the background, here is what I think: basically when I change the second div tag, the diff algorithm notices that it has been altered, so it goes ahead and tries to modify the dom associated with it. In my opinion it can 1). either update the current dom 2). delete it and append a new dom. In the first situation, shouldn't it leave the first animation unchanged without adding a new animation? In the second situation, if it gets rid off the current dom, why would the original animation be kept?

Answer 1

React can do both scenarios you mentioned: update existing and destroy & re-create. And React uses its own algorithm to decide when to do which.
You can force React to use destroy & re-create strategy using a special props called key.
Here is an example: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
Quoted from the link above:
When a key changes, React will create a new component instance rather than update the current one
I couldn't run the example you provided via code sandbox and just by reading your code, I can see that your App component has no props and no state. Thus, there is no way for you to update it.
Your code said: when componentDidMount use lottie to do some animation inside the second div. So, chances are the animation issue you're having is probably coming from lottie not React.