Implement shouldComponentUpdate for torrent table

src/ui/torrent_table.js

@@ -5,15 +5,16 @@ import { formatBitrate } from '../bitrate';
 import Ratio from './ratio';
 import TorrentProgress from './torrent_progress';
 
-class TorrentTable extends Component {
-  render() {
-    const { selection, torrents, dispatch } = this.props;
 const name_style = {
   maxWidth: `${window.innerWidth * 0.25}px`,
   textOverflow: 'ellipsis',
   overflowX: 'hidden',
   whiteSpace: 'nowrap'
 };
+
+class TorrentTable extends Component {
+  render() {
+    const { selection, torrents, dispatch } = this.props;
     return (
       <table className="table torrents">
         <thead>
@@ -46,8 +47,37 @@ class TorrentTable extends Component {
         </thead>
         <tbody>
           {Object.values(torrents).slice().sort((a, b) => a.name.localeCompare(b.name)).map(t =>
-            <tr
+            <Torrent
+              dispatch={dispatch}
+              torrent={t}
+              selection={selection}
               key={t.id}
+            />
+          )}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+class Torrent extends Component {
+  shouldComponentUpdate(nextProps, _) {
+    const { selection, torrent } = this.props;
+    const nt = nextProps.torrent;
+    const active = selection.indexOf(torrent.id);
+    const nActive = nextProps.selection.indexOf(torrent.id);
+    return active !== nActive
+      || torrent.id !== nt.id
+      || torrent.status !== nt.status
+      || torrent.rate_down !== nt.rate_down
+      || torrent.rate_up !== nt.rate_up;
+  }
+
+  render() {
+    const { dispatch, selection, torrent } = this.props;
+    const t = torrent;
+    return (
+      <tr
         className={`torrent ${
           t.status
         } ${
@@ -77,9 +107,6 @@ class TorrentTable extends Component {
         <td><Ratio up={t.transferred_up} down={t.transferred_down} /></td>
         <td><TorrentProgress torrent={t} /></td>
       </tr>
-          )}
-        </tbody>
-      </table>
     );
   }
 }