title: React - changing key prop doesn't cause rerender of child component
body: <p>I am using <a href="https://www.npmjs.com/package/react-infinite-scroller" rel="nofollow noreferrer">react-infinite-scroll</a> to render a feed of data. Whenever the user changes their settings, I want to refresh the feed of data.</p>
  
  <p>To do this, I have a key prop for the <code>InfiniteScroll</code> component. The idea being whenever the user changes their settings</p>
  
  <ol>
  <li><code>this.state.renderCount</code> is incremented by 1 in <code>setState</code></li>
  <li><p>React notices that the key prop of <code>InfiniteScroll</code> is different, and re-renders the component from scratch.</p>
  
  <pre><code>  &lt;Content style={{ padding: "0px 20px" }}&gt;
      &lt;InfiniteScroll
        key={this.state.renderCount}
        style={{ width: "100%", height: "100%" }}
        pageStart={0}
        loadMore={this.loadPosts.bind(this)}
        hasMore={true}
        loader={&lt;div&gt;Loading....&lt;/div&gt;}
        useWindow={false}
      &gt;
        {listItems}
      &lt;/InfiniteScroll&gt;
    &lt;/Content&gt;
  </code></pre></li>
  </ol>
  
  <p>The refresh code is in <code>componentDidUpdate</code> and is called if I determine that a refresh is needed:</p>
  
  <pre><code>  this.setState({ renderCount: this.state.renderCount + 1 })
  </code></pre>
  
  <p>However, the component is not reset. Why is this? </p>