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

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