title: What is the problem of glitch when scrolling using react-window?
body: <p>I want to do row virtualization when scrolling (so that data is shown when scrolling) </p>
  
  <p>But when scrolling, now the terrible glitches appear</p>
  
  <p>Tell me what is the problem? </p>
  
  <p>project - <a href="http://male-wind.surge.sh" rel="nofollow noreferrer">male-wind.surge.sh</a></p>
  
  <p>A component with a table (react-window is used there):</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import actions from "../../actions";
  import PropTypes from "prop-types";
  import sort from "./sort";
  import { FixedSizeList } from 'react-window';
  
  function TitleColumn(data) {
    return (
      &lt;Grid item xs={1}&gt;
        &lt;Box className="title_elem"&gt;
          &lt;h3
            className="table_title-text"
            onClick={sort.bind(null, `${data.title.toLowerCase()}`, data.props)}
          &gt;
            {data.title}
          &lt;/h3&gt;
          {data.props.fourthData.data === `${data.title.toLowerCase()}` ? (
            &lt;p&gt;{data.props.fifthData.data}&lt;/p&gt;
          ) : null}
        &lt;/Box&gt;
      &lt;/Grid&gt;
    );
  }
  
  
  class Table extends Component {
    render() {
      const data = this.props.info;
      const Row = ({ index, style}) =&gt; {
        return (
          &lt;Grid container className="table_row"&gt;
            &lt;Grid item xs={1}&gt;
              &lt;Box className="table_elem name_elem"&gt;{data[index].name}&lt;/Box&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={1}&gt;
              &lt;Box className="table_elem job_elem"&gt;{data[index].job}&lt;/Box&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={1}&gt;
              &lt;Box className="table_elem city_elem"&gt;{data[index].city}&lt;/Box&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={1}&gt;
              &lt;Box className="table_elem country_elem"&gt;{data[index].country}&lt;/Box&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={1}&gt;
              &lt;Box className="table_elem latitude_elem"&gt;{data[index].latitude}&lt;/Box&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={1}&gt;
              &lt;Box className="table_elem longitude_elem"&gt;{data[index].longitude}&lt;/Box&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={1}&gt;
              &lt;Box className="table_elem date_elem"&gt;
                {`${data[index].date.toLocaleString("en", {
              year: "numeric",
              month: "long",
              day: "numeric"
            })}`}
              &lt;/Box&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        )
      };
      return (
          &lt;Grid
            container
            className="developer_block-time_feature time_feature_block"
          &gt;
            &lt;Grid container className="table_title"&gt;
              &lt;TitleColumn props={this.props} title="Name" /&gt;
              &lt;TitleColumn props={this.props} title="Job" /&gt;
              &lt;TitleColumn props={this.props} title="City" /&gt;
              &lt;TitleColumn props={this.props} title="Country" /&gt;
              &lt;TitleColumn props={this.props} title="Latitude" /&gt;
              &lt;TitleColumn props={this.props} title="Longitude" /&gt;
              &lt;TitleColumn props={this.props} title="Date" /&gt;
            &lt;/Grid&gt;
            &lt;FixedSizeList                 &lt;---------------use react-window
              height={500} 
              itemSize={60}
              itemCount={data.length}
              className="list-container"
            &gt;
              {Row}
            &lt;/FixedSizeList&gt;
          &lt;/Grid&gt;
      );
    }
  }
  
  Table.propTypes = {
    fourthData: PropTypes.object.isRequired,
    fifthData: PropTypes.object.isRequired
  };
  
  const mapStateToProps = store =&gt; {
    return {
      firstData: store.firstData,
      secondData: store.secondData,
      thirdData: store.thirdData,
      fourthData: store.fourthData,
      fifthData: store.fifthData
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      setData: data =&gt; dispatch(actions.setData(data)),
      changeSearchData: searchData =&gt;
        dispatch(actions.changeSearchData(searchData)),
      changeSort: sort =&gt; dispatch(actions.changeSort(sort)),
      setSortTitle: sortField =&gt; dispatch(actions.setSortTitle(sortField)),
      changeArrow: arrow =&gt; dispatch(actions.changeArrow(arrow))
    };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Table);
  </code></pre>
  
  <p>I try to use this solution, but it does not help - <a href="https://github.com/bvaughn/react-virtualized/issues/1327" rel="nofollow noreferrer">https://github.com/bvaughn/react-virtualized/issues/1327</a></p>