React-motion rendering on every animation

Question

I'm getting really bad performance using React-Motion (https://github.com/chenglou/react-motion). I'm animating the height of a dropdown from a table row from 0 to 260.

constructor() {
    this.state = {
        opened: false
    }

    this.handleRowClick = this.handleRowClick.bind(this)
}

handleRowClick() {
    this.setState({
        opened: !this.state.opened
    })
}

render() {
    <Motion style={{height: spring(this.state.opened ? 260 : 0, {stiffness: 140, damping: 30})}}>
        {(height) => 
            <div onClick={this.handleRowClick}>
                <div style={height}>
                    ...stuff goes here
                </div>
            </div>
        }
    </Motion>
}

The animation is working as expected, but upon logging the height every time it renders all of this in the span of ~5 seconds (which is WAY too long):

Maybe I misread something in the docs, but is there a way to avoid lag on the animation?

score 1 · Answer 1 · answered Sep 19 '17 at 09:44

You'll need to apply the transition styles to a div and render a component inside it which implements shouldComponentUpdate (eg. with React.PureComponent) to prevent it from rerendering when not needed.

render () {
  <Motion 
    style={{
      height: spring(
        this.state.opened ? 260 : 0, 
        { stiffness: 140, damping: 30 }
      )
    }}
  >
    {(height) => 
      <div style={height}>
        <YourComponent />
      </div>
    }
  </Motion>
}

And MyComponent might be something like class MyComponent extends React.PureComponent or using a HOC like pure from recompose. This way MyComponent will only update when it's props changes.

React-motion rendering on every animation

1 Answers1