title: All TableRows are rerendered each time a row is selected with React and material-ui
body: <p>I have a code snippet like this</p>
  
  <pre><code>&lt;Table selectable onRowSelection={this.onRecordSelected} bodyStyle={tableBodyStyle}&gt;
          &lt;TableBody deselectOnClickaway={false} showRowHover displayRowCheckbox={false}&gt;
            {this.props.taskRecords.map((row, index) =&gt; (
              &lt;TableRow key={row.get('id')} selected={this.state.selectedRecordRowId === index}&gt;
                &lt;TableRowColumn&gt;{row.getIn(['task', 'name'])}&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;{row.getIn(['task', 'description'])}&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;{row.get('status')}&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;{row.get('log')}&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
            ))}
          &lt;/TableBody&gt;
  &lt;/Table&gt;
  </code></pre>
  
  <p>I checked the source code of <code>TableRow</code> and <code>TableRowColumn</code>, I found they didn't implement <code>shouldComponentUpdate</code> method. I understand they would be rerendered when any state is changed.  </p>
  
  <p>I tried to use <code>pure</code> function in <code>recompose</code> library to purify these to components.</p>
  
  <pre><code>const TableRow = pure(require('material-ui/lib/table/table-row'));
  const TableRowColumn = pure(require('material-ui/lib/table/table-row-column'));
  </code></pre>
  
  <p>They were still rerendered
  <a href="https://i.stack.imgur.com/Csnjh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Csnjh.png" alt="enter image description here"></a></p>
  
  <p>In my understanding, components after purified wouldn't be rerendered anymore if given <code>props</code> are not changed.  In this case, all props are either Immutable objects from <code>Immutable.js</code> or functions.</p>
  
  <p>Is there any way to prevent it from rerendering when I select any row?</p>
  
  <p>Thank you in advance.</p>