Using Animations in React while relying on this.props

This is not a React tutorial on how to do animations. This isn't even a tutorial at all. This is just some basic stuff you should know when doing animations and React.

  1. Animations are critical to UI unless you suck
  2. Animations need state
  3. You cannot rely on this.props alone
  4. You should code as if only this.props matters by using componentWillReceiveProps to trigger animations (state changes)

The general setup is like so...

class SomeComponent extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
      // some animation initialized
    };
  }

  doAnimation(show) {
    if (show)
       //... call show animation
    else
       //... call hide animation
  }

  componentWillMount() {
    // needed to initialize props
    this.componentWillReceiveProps(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.show !== nextProps.show) {
      this.doAnimation(nextProps.show);
    }
  }

  render() {
    // some render code
  }
}