title: React, Using Refs to scrollIntoView() doen't work on componentDidUpdate()
body: <p>I'm using Redux in my app, inside a Component I want to scroll to an specific div tag when a change in the store happens.
  I have the Redux part working so it triggers the componentDidUpdate() method (I routed to this compoennt view already).
  The problem as far as I can tell, is that the method scrollIntoView() doesn't work properly cos componentDidUpdate() has a default behavior that scrolls to the top overwriting the scrollIntoView().
  To work-around it I wrapped the function calling scrollIntoView() in a setTimeout to ensure that happens afeterwards.
  What I would like to do is to call a preventDefault() or any other more elegant solution but I can't find where to get the event triggering the 'scrollTop'
  I looked through the Doc here: <a href="https://facebook.github.io/react/docs/react-component.html#componentdidupdate" rel="noreferrer">https://facebook.github.io/react/docs/react-component.html#componentdidupdate</a>
  and the params passed in this function are componentDidUpdate(prevProps, prevState) ,since there is no event I don't know how to call preventDefault()</p>
  
  <p>I've followd this Docs: <a href="https://facebook.github.io/react/docs/refs-and-the-dom.html" rel="noreferrer">https://facebook.github.io/react/docs/refs-and-the-dom.html</a>
  And tried different approaches people suggested here: <a href="https://stackoverflow.com/questions/30495062/how-can-i-scroll-a-div-to-be-visible-in-reactjs">How can I scroll a div to be visible in ReactJS?</a></p>
  
  <p>Nothing worked though 
  Here is my code if anyone has any tip for me, thanks</p>
  
  <pre><code>class PhotoContainer extends React.Component {
  
    componentDidUpdate(){
      setTimeout(() =&gt; {
       this.focusDiv();
      }, 500);
  
    }
    focusDiv(){
      var scrolling = this.theDiv;
      scrolling.scrollIntoView();
  
    }
  
    render() {
      const totalList = [];
      for(let i = 0; i &lt; 300; i += 1) {
          totalList.push(
              &lt;div key={i}&gt;{`hello ${i}`}&lt;/div&gt;
          );
      }
  
    return (
        &lt;div &gt;
            {totalList}
            &lt;div ref={(el) =&gt; this.theDiv = el}&gt;this is the div I'm trying to scroll to&lt;/div&gt;
        &lt;/div&gt;
    )
  </code></pre>
  
  <p>};
      }</p>