title: Reactjs force DOM update
body: <p>I am trying to get css animations going for the height of an element via react.</p>
  
  <p>CSS animations for height are hard as they require static heights.</p>
  
  <p>To animate a collapse (height from x to 0) I set the height of the element to a static height (using scrollHeight) then set the height to 0 right after, and vice versa for an expand (height from 0 to x).</p>
  
  <p>Unfortunately this only works sometimes. I think react is detecting that these two events are happening quickly on the same prop and only propagating the latest to the DOM which breaks my animation.</p>
  
  <p><strong>Is there a way to force react to propagate both changes to the DOM?</strong></p>
  
  <p>Code (prob not terribly interesting):</p>
  
  <pre><code>componentWillReceiveProps(nextProps){
      if(nextProps.open !== this.props.open){
          if(nextProps.open){
              this.setState({height:0, animating: true});
          }
          else{
              this.setState({height:this.refs.body.scrollHeight, animating: true});
          }
      }
  }
  componentDidUpdate(prevProps, prevState){
      if(prevProps.open !== this.props.open){
          if(prevProps.open &amp;&amp; !this.props.open){
              this.setState({height: '0'});
          }
          else{
              this.setState({height: this.refs.body.scrollHeight});
          }
          setTimeout(()=&gt;{
              this.setState({animating:false});
          }.bind(this), this.props.animationTime);
      }
  }
  </code></pre>