title: How to use CellMeasurer correctly?
body: <p>I have an interactive component inside "react-virtualized" List that acts on clicks. When the component is clicked, the cell transforms i.e. height changes.</p>
  
  <p>My first version of the rowRenderer:</p>
  
  <pre><code>rowRenderer ({index, isScrolling, key, style}) {
      let message = this.props.messages[index];
  
      return &lt;Message key={message.id} text={message.text} /&gt;
  }
  </code></pre>
  
  <p>When the message is clicked, a text field appears. This changes the height. What however happens is that component renders over the next message. </p>
  
  <p>This happens because the instance of Message is different in UI and in CellMeasurer as you can see:</p>
  
  <pre><code> &lt;CellMeasurer
      cellRenderer={
          // Here we return instance 1 
          ({ rowIndex, ...rest }) =&gt; this.rowRenderer({ index: rowIndex, ...rest })
      }
      columnCount={1}
      rowCount={messages.length}
    &gt;
  
    {({ getRowHeight, resetMeasurementForRow }) =&gt; {
      this.resetMeasurementForRow = resetMeasurementForRow;
  
      return &lt;List
          height={height}
          overscanRowCount={50}
          rowCount={messages.length}
          rowHeight={getRowHeight}
          rowRenderer={this.rowRenderer} // Here we create another instance
          width={width}
          ref={(ref)=&gt;{
              this.list = ref;
          }}
      /&gt;
    }}
  &lt;/CellMeasurer&gt;
  </code></pre>
  
  <p>The instance created by List will obviously contain correct state but CellMeasurer is not aware of this state.  </p>
  
  <p>I tested the following approach but I highly doubt that this is the correct way to do this? I simply cache the UI component instance myself:</p>
  
  <pre><code>rowRenderer ({index, isScrolling, key, style}) {
      let message = this.props.messages[index];
  
      if(!this.componentCache[index]) {
          this.componentCache[index] = &lt;Message key={message.id} text={message.text} /&gt;
      }
  
      return this.componentCache[index];
  }
  </code></pre>
  
  <p>This fixes this problem but probably introduces many other issues. What is the correct way to do this? </p>
  
  <p>(I'm aware that using Flux/Redux/global state could fix this but I'm wondering is there some fundamental react-virtualized feature/aspect that I'm missing here.)</p>