title: React Grid - setState not triggering render in Grid
body: <p>This is driving me nuts!  I have tried all those tricks to get this data to render using lifecycle methods to compare prop data to current state of the row data in my  component but it would seem that maybe React Grid with the row prop is not updating because I can see the console log of the rows with data in my console.  It has data but it's showing 'no data' in my table which means when my table rendered there must have been 'no data'.  Now if I make simple change to the component, hit save, its updates and boom i see 3 entries in the table.  Which oddly now there are 6 entries in my console in the array.  </p>
  
  <pre><code>export default class Demo extends React.PureComponent {
      constructor(props) {
          super(props);
          this.state = {
              columns: [
                  { name: 'teamName', title: 'Team' },
                  { name: 'profilePic', title: 'Avatar' },
                  { name: 'score', title: 'Score' },
                  { name: 'profileName', title: 'profileName' },
                  { name: '', title: 'Rank' }
              ],
              rows: [],
              pageSizes: [5, 10, 15],
              currentPage: 0,
              loading: true,
              counter: 0
          };
      }
  
      componentWillMount() {
          this.getRows();
      }
      componentDidMount() {
          this.getRows();
      }
  
      getRows = () =&gt; {
          this.setState({
              rows: this.props.league
          });
      };
  
      //   static getDerivedStateFromProps(props, state) {
      //     if (props.league.length !== state.rows.length) {
      //       return {
      //         rows: props.league
      //       };
      //     }
      //     return null;
      //   }
  
  
      // componentDidMount() {
      //     console.log("NP1::",this.props.league)
      //     this.setState({rows: this.props.league})
      //   }
  
      //   componentDidUpdate(nextProps, prevState) {
      //     if(nextProps.league!==prevState.rows){
      //       //Perform some operation here
      //       console.log("NP2::",this.props.league)
      //       this.setState({rows: this.props.league});
      //       this.classMethod();
      //   }
      // }
  
  
      // static getDerivedStateFromProps(nextProps, prevState){
      //     if(nextProps.league!==prevState.rows){
      //         console.log("NP::",nextProps.league)
      //         return{
      //             rows: nextProps.league
      //         }
  
      //       return 
      //    }
      //    else return null;
      //  }
  
      //  componentDidUpdate(nextProps, prevState) {
      //     if(nextProps.league!==prevState.rows){
      //       //Perform some operation here
      //       console.log("NP2::",this.props.league)
      //       this.setState({rows: this.props.league});
      //       this.classMethod();
      //     }
      // }
  
      // componentWillReceiveProps(nextProps) {
      //     console.log("NP::",nextProps.league+"----"+this.props.league);
      //     if (nextProps.league !== this.props.league) {
      //         console.log("NP2::",nextProps.league)
      //         this.setState({rows: nextProps.league})
      //     }
      // }
  
      // componentWillUpdate(nextProps, nextState) {
      //     console.log("NP::", nextProps.league + "----" + this.state.rows);
      //     if (nextProps.league !== this.state.rows) {
      //         this.setState({ rows: nextProps.league })
      //     }
      // }
  
      render() {
          const { rows, columns } = this.state;
          console.log("STATEDATA::", this.state)
          return (
              &lt;Paper&gt;
                  &lt;Grid
                      rows={rows}
                      columns={columns}
  
                  &gt;
                      &lt;RowDetailState /&gt;
                      &lt;Table
                          cellComponent={Cell}
                      /&gt;
                      &lt;TableHeaderRow /&gt;
                      &lt;TableRowDetail
                          contentComponent={RowDetail}
                      /&gt;
                  &lt;/Grid&gt;
                  {/* &lt;PagingPanel /&gt; */}
              &lt;/Paper&gt;
          );
      }
  } 
  </code></pre>
  
  <p>I've left in the commented code so you can see the LF methods I've played with.  Here is what the first render looks like with no data and the console log of of my state data that includes rows. </p>
  
  <p><a href="https://i.stack.imgur.com/o63Pw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o63Pw.png" alt="dx-react-grid"></a></p>
  
  <p>My initial state of rows is [] so we know setState happened.  Why is that not triggering a render in this component.  I saw some posts about this with Ag Grid but is there any known issues with the React grid and getting it to render properly?  </p>
  
  <p>As mentioned, in Vs code, if I just do a line return (or make any change) and save.  The component updates.  I will have 3 entries render and 6 in the console array as seen here.  </p>
  
  <p><a href="https://i.stack.imgur.com/5NMJS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5NMJS.png" alt="after change"></a></p>
  
  <p>Adding this so you can see state an league props at same time.  </p>
  
  <p><a href="https://i.stack.imgur.com/i2Y0V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i2Y0V.png" alt="State and Props"></a></p>
  
  <p>Here is the parent Component</p>
  
  <pre><code>class LeaguePage extends Component {
      static propTypes = {
          loadLeague: PropTypes.func.isRequired,    
        }
        constructor(props) {
          super(props)
          this.state = {
          };
      }
  
      componentWillMount() {
          this.props.loadLeague();
        }
  
      render() {
          console.log("LEAGUEPROPS::",this.props);
          return (
              &lt;div className="g-row"&gt;
                  &lt;div className="g-col"&gt;
                  &lt;h1&gt;LeaguePage&lt;/h1&gt;
                  {/* &lt;LeagueTable {...this.props} /&gt; */}
                  &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;RgDetail {...this.props} rows={this.state.rows}  /&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                  {/* &lt;RgTable /&gt; */}
                  &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
      console.log("MYSTATE::",state)
      return {
          league: LeagueSelector(state),
      }
    }
  
  
  const mapDispatchToProps = Object.assign(
      {},
      leagueActions
    );
  
    export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LeaguePage));
  </code></pre>
  
  <p>An the selector for league</p>
  
  <pre><code>import { createSelector } from 'reselect';
  import _ from 'lodash';
  
  var data = [];
  
  export function getLeague(state) {
    if (state.league) {
      return state.league;
    }
  }
  
  function transform(UserRecord) {
    const outerObj = UserRecord[Object.keys(UserRecord)[0]];
    data.push(outerObj);
    return data
  }
  
  export function getSortedLeague(state) {
    if (state.length &gt; 1) {
      state.map(x =&gt; transform(x));
      return data;
    }
    else
      return data;
  }
  
  //=====================================
  //  MEMOIZED SELECTORS
  //-------------------------------------
  
  export const LeagueSelector = createSelector(
    getLeague,
    getSortedLeague
  );
  
  </code></pre>