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

Use shouldComponentUpdate to prevent unnecessaries re renders or you can use a PureComponent — lissettdm, Sep 30 '20 at 15:26
You can use `React PureComponent` it'll be helpful for the re-rendering issues.Here is the link for more details [https://reactjs.org/docs/react-api.html#reactpurecomponent] — Jay Parmar, Sep 30 '20 at 15:37
It's okay for the re-render to happen, what I don't need is the animation happening along with it. — DANIEL SSEJJEMBA, Sep 30 '20 at 16:02
I do not see any problem with this code. It is possible, that the component containing the Animation component remounts and it causes the enter animation to replay. Can you create a CodeSandbox? — Peter Ambruzs, Sep 30 '20 at 16:03

score 2 · Answer 1 · answered Oct 01 '20 at 09:25

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

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

1 Answers1