title: React set scroll position before component mount
body: <p>I have the below react component which is essentially a chat-box</p>
  
  <pre><code> render(){
      const messages = this.props.messages;
      return(
        &lt;div id="project_chat"&gt;
          &lt;h1&gt;{this.props.project[0].project}&lt;/h1&gt;
          &lt;div className="chat_room"&gt;
  
            &lt;div className="messages" ref="messages"&gt;
              &lt;Waypoint onEnter={this.activateWayPoint}/&gt;
              &lt;ul&gt;
                {messages.map((message) =&gt; {
                  return(
                    &lt;Message key={uuid.v4()} message={message}/&gt;
                  )
                })}
              &lt;/ul&gt;
            &lt;/div&gt;
  
            &lt;div className="chat_message_box"&gt;
              &lt;input type='text' onChange={this.handleChange} value={this.state.message} className="message_box" placeholder="enter message"/&gt;
              &lt;button className="submit_message" onClick={this.handleSubmit}&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p>the problem i faced is the chat messages box starts at the topmost position of the container (scroll position starts at the top). I wanted the scroll position to be at the bottom like a normal chat room.</p>
  
  <p>so i tried doing this:</p>
  
  <pre><code>  componentDidMount(){
      this.refs.messages.scrollTop = this.refs.messages.scrollHeight
    }
  </code></pre>
  
  <p>this triggers AFTER the component gets mounted i.e - the message box scroll position initially starts at the top and forces its way to the bottom on render.</p>
  
  <p>this is normally fine but i'm using a library called <code>react-waypoint</code> which would help me paginate chat messages. this gets triggered every time i'm at the top of the container.</p>
  
  <p>the unhappy consequence is that because the message box starts at the top initially on mount, the waypoint always gets triggered on mount as well.</p>
  
  <p>my question is whether i can force the message component to start at the bottom position as opposed to starting the top and going to the bottom at the beginning</p>
  
  <p>I tried doing this</p>
  
  <pre><code>  componentWillMount(){
      this.refs.messages.scrollTop = this.refs.messages.scrollHeight
    }
  </code></pre>
  
  <p>the problem is i dont have access to refs before the component mounts. is there any other way?</p>