title: componentDidUpdate scroll to bottom when item is loaded
body: <p>I have a list, I want to scroll to the bottom, I have my component coded like this</p>
  
  <pre><code>class Msg extends Component {
  
      componentDidUpdate() {
  
          if(this.container){
              this.container.scrollTop = this.container.scrollHeight
          }
      }
  
      render() {
          return(
              &lt;div ref={elem = this.container = elem}&gt;
                  &lt;Item /&gt;
                  &lt;Item /&gt;
                  &lt;Item /&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>It worked. But the problem is it scroll every time when the component rerender. Msg has many children component, trigger the state of child component will cause Msg component to render again, how to solve this problem?</p>
  
  <p>To explain it like a normal user: </p>
  
  <p>User scrolls up the list, then click on dropdown somewhere, the componentDidUpdate triggered, caused scrolled to bottom.</p>