How to stop React-spring from running an animation on re-render - reactjs

Question

I am using react-spring to animate my components. But I want to only run the animation when mounting then the leaving animation when unmounting. But my animation runs everytime a component re-renders. every prop change causes the animation to run again which is not how I expect it to work. thanks for the help in advance.
/* eslint-disable react/jsx-props-no-spreading */
import * as React from 'react'
import { Transition, animated, config } from 'react-spring/renderprops'
class Animation extends React.Component {
constructor(props) {
super(props)
this.shouldAnimate = props.shouldAnimate
}
render() {
const Container = animated(this.props.container)
return (
<Transition
items={this.props.items}
native
initial={this.props.initial}
from={this.props.from}
leave={this.props.leave}
enter={this.props.enter}
config={config.gentle}
>
{(visible) =>
visible &&
((styles) => (
<Container
style={styles}
{...this.props.containerProps}
>
{this.props.children}
</Container>
))
}
</Transition>
)
}
}
export default Animation

Answer 1

I have found a solution to my very question after carefully looking at my component and logging the life-cycle method calls. I found out that each prop change was causing creation of a new container component and therefore causing the component to unmount and remount which in turn caused the animation to play. and the solution was easy after realizing this. I just changed my file to this and now it works just fine.
/* eslint-disable react/jsx-props-no-spreading */
import * as React from 'react'
import { Transition, animated } from 'react-spring/renderprops'
class Animation extends React.PureComponent {
constructor(props) {
super(props)
this.shouldAnimate = props.shouldAnimate
this.container = animated(this.props.container)
}
render() {
const Container = this.container
return (
<Transition
items={this.props.items}
native
initial={this.props.initial}
from={this.props.from}
update={this.props.update}
leave={this.props.leave}
enter={this.props.enter}
>
{(visible) =>
visible &&
((styles) => (
<Container
style={styles}
{...this.props.containerProps}
>
{this.props.children}
</Container>
))
}
</Transition>
)
}
}
export default Animation