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) {
    this.state = {
      // some animation initialized

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

  componentWillMount() {
    // needed to initialize props

  componentWillReceiveProps(nextProps) {
    if ( !== {

  render() {
    // some render code