title: ReactJS ref.current.scrollTop keeps changing between renders
body: <p>I'm trying to create a virtualized grid that only shows data that fits within the viewport. In the <code>Vlist</code> object, I'm getting a <code>RefObject</code> of the viewport and using <code>viewPortRef.current.scrollTop</code> to help calculate the index to determine which items in the list to display in the viewport. </p>
  
  <p>However, when I run my code and scroll I see the new items added but they flicker. Additionally, if I keep scrolling the whole thing bugs out and will either stop displaying anything or reset back to the top.</p>
  
  <p>When I debug the scrolling I'm seeing that my <code>viewPortRef.current.scrollTop</code> value keeps alternating between two values each time the component renders.</p>
  
  <p>I can't figure out why <code>scrollTop</code> would alternate values like that. Am I referencing the wrong element? Am I making a mistake using scrollTop to find the scroll position?</p>
  
  <p>What's especially confusing is that I'm basically just trying to copy the virtual grid found in this answer: <a href="https://stackoverflow.com/a/50615182/11137097">https://stackoverflow.com/a/50615182/11137097</a></p>
  
  <p>That code snippet seems to work fine on its own, but I get the issues described above when I try to bring it over into my website.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>class Item extends React.Component
  {
      props: {
          top: any;
          itemHeight: any;
          label: any;
      }
  
  
      constructor(props)
      {
          super(props);
      }
      render()
      {
          return (
              &lt;div className="item" style={{ top: this.props.top, height: this.props.itemHeight }}&gt;
                  {this.props.label}
              &lt;/div&gt;)
  
      }
  }
  
  class Vlist extends React.Component&lt;{}, { [property: string]: number }&gt;
  {
      props: {
          itemHeight: number;
          containerStyle: object;
          data: any[];
          numberVisibleItems: number;
      }
  
      state: {
          start: number;
          end: number;
      }
  
      private viewPortRef: React.RefObject&lt;HTMLDivElement&gt;;
      private scrollTop: number;
  
      constructor(props)
      {
          super(props);
          this.state = {
              start: 0,
              end: this.props.numberVisibleItems,
          }           
  
          this.scollPos = this.scollPos.bind(this)
          this.createRows = this.createRows.bind(this)
          this.props.data = props.data;
          this.viewPortRef = React.createRef();
          this.scrollTop = 0;
      }
  
      scollPos()
      {
          this.scrollTop = Math.trunc(this.viewPortRef.current.scrollTop);
          let currentIndx = Math.trunc(this.scrollTop / this.props.itemHeight)
          currentIndx = currentIndx - this.props.numberVisibleItems &gt;= this.props.data.length ? currentIndx - this.props.numberVisibleItems : currentIndx;
          if (currentIndx !== this.state.start)
          {
              this.setState({
                      start: currentIndx,
                      end: currentIndx + this.props.numberVisibleItems &gt;= this.props.data.length ? this.props.data.length - 1 : currentIndx + this.props.numberVisibleItems,
                  }
              )
          }
  
      }
  
      createRows()
      {
          let result = [];
          for (let i = this.state.start; i &lt;= this.state.end; i++)
          {
              if (this.props.data.length &gt; 0) {
                  let item = this.props.data[i];
                  result.push(&lt;Item key={i} label={item.name} top={i * this.props.itemHeight} itemHeight={this.props.itemHeight} /&gt;);
              }
          }
          return result;
      } 
  
      render()
      {
          let rows = this.createRows();
  
          return (
              &lt;div className="span11"&gt;
                  &lt;div ref={this.viewPortRef} className="viewPort" onScroll={this.scollPos} &gt;
                      &lt;div className="itemContainer" style={this.props.containerStyle}&gt;
                          {rows}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
  }
  </code></pre>
  
  <p>CSS Style:</p>
  
  <pre><code>.viewPort {
      //position: relative;
      width: 100%;
      height: 66.67vh;
      border: solid 1px;
      overflow-y: scroll;
  }
  
  .itemContainer {
      //position: absolute;
      width: calc(100% - 10px);
      background-color: azure;
  }
  
  .item {
      //position: relative;
      background-color: beige;
      border: solid 1px;
      width: 100%;
      text-align: center;
      height: 66.67vh;
  }
  
  .done {
      color: rgba(0, 0, 0, 0.3);
      text-decoration: line-through;
  }
  </code></pre>