Improve reducing and rendering performance

src/reducers/resource.js

@@ -12,21 +12,17 @@ function hack(old, _new) {
 
 export default function resourceReducer(type) {
   return (state = {}, action) => {
+    let ns = {...state};
     switch (action.type) {
       case UPDATE_RESOURCES:
-        return {
+        action.resources
-          ...state,
-          ...action.resources
           .filter(r => r.type ===type)
-            .reduce((s, r) => ({
+          .map(r => ns[r.id] = hack(state[r.id], { ...state[r.id], ...r }));
-              ...s,
+        return ns;
-              [r.id]: hack(state[r.id], { ...state[r.id], ...r })
-            }), {})
-        };
       case RESOURCES_REMOVED:
-        return Object.values(state)
+        action.ids
-          .filter(r => action.ids.indexOf(r.id) === -1)
+          .map(id => delete ns[id]);
-          .reduce((s, r) => ({ ...s, [r.id]: r }), {});
+        return ns;
       case SOCKET_UPDATE:
         const _state = action.state;
         return _state === SOCKET_STATE.CONNECTING ? {} : state;

src/reducers/subscribe.js

@@ -8,12 +8,12 @@ export default function subscribe(state = [], action) {
       return [ ...state, ...ids.map(id => ({ serial, id })) ];
     }
     case UNSUBSCRIBE: {
-      const { ids } = action;
+      const ids = new Set(action.ids);
-      return state.filter(sub => ids.indexOf(sub.id) === -1);
+      return state.filter(sub => !ids.has(sub.id));
     }
     case RESOURCES_REMOVED: {
-      const { ids } = action;
+      const ids = new Set(action.ids);
-      return state.filter(sub => ids.indexOf(sub.id) === -1);
+      return state.filter(sub => !ids.has(sub.id));
     }
   }
   return state;

src/ui/torrent_details.js

@@ -35,7 +35,13 @@ function basename(path) {
   return parts[parts.length - 1];
 }
 
-function File({ dispatch, file }) {
+class File extends Component {
+  shouldComponentUpdate(nextProps, _) {
+    return nextProps.file !== this.props.file;
+  }
+
+  render() {
+    const { dispatch, file } = this.props;
     const { uri } = store.getState().socket;
     const { download_token } = store.getState().server;
     return (
@@ -74,8 +80,15 @@ function File({ dispatch, file }) {
       </div>
     );
   }
+}
 
-function Peer({ peer }) {
+class Peer extends Component {
+  shouldComponentUpdate(nextProps, _) {
+    return nextProps.peer !== this.props.peer;
+  }
+
+  render() {
+    const { peer } = this.props;
     return (
       <div className="peer">
         <div style={{flexGrow: 5}}>{peer.ip}</div>
@@ -85,6 +98,7 @@ function Peer({ peer }) {
       </div>
     );
   }
+}
 
 // TODO: move to separate component
 function CollapseToggle({ text, onToggle, open }) {
@@ -114,6 +128,14 @@ class Torrent extends Component {
     };
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps.torrent !== this.props.torrent
+      || nextState.peersShown !== this.state.peersShown
+      || nextState.trackersShown !== this.state.trackersShown
+      || nextState.filesShown !== this.state.filesShown
+      || nextState.infoShown !== this.state.infoShown;
+  }
+
   toggleTorrentState(torrent) {
     if (torrent.status === "paused") {
       ws_send("RESUME_TORRENT", { id: torrent.id });
@@ -222,9 +244,11 @@ class Torrent extends Component {
           <Card style={{marginBottom: "1rem"}}>
             <CardBlock style={{padding: "0"}}>
               <div className="files flex-table" style={{marginBottom: "0"}}>
-                {files.slice().sort((a, b) =>
+                {this.state.filesShown
-                  a.path.localeCompare(b.path)).map(file =>
+                  ? files.slice()
-                    <File dispatch={dispatch} file={file} />)}
+                    .sort((a, b) => a.path.localeCompare(b.path))
+                    .map(file => <File dispatch={dispatch} file={file}/>)
+                  : null}
               </div>
             </CardBlock>
           </Card>
@@ -264,7 +288,7 @@ class Torrent extends Component {
           <Card style={{marginBottom: "1rem"}}>
             <CardBlock style={{padding: "0"}}>
               <div className="peers flex-table" style={{marginBottom: "0"}}>
-                {peers.map(peer => <Peer peer={peer} />)}
+                {this.state.peersShown ? peers.map(peer => <Peer peer={peer} />) : null}
               </div>
               {peers.length === 0 &&
                 <div style={{padding: "0.5rem 0 0 0.5rem"}}>
@@ -361,15 +385,21 @@ class TorrentDetails extends Component {
       selection,
       dispatch
     } = this.props;
-    const _files = Object.values(files).reduce((s, f) => ({
+    const index_by_tid = (res)  => {
-      ...s, [f.torrent_id]: [...(s[f.torrent_id] || []), f]
+      let _indexed = {};
-    }), {});
+      Object.values(res).map(r => {
-    const _trackers = Object.values(trackers).reduce((s, t) => ({
+        if (!(r.torrent_id in _indexed)) {
-      ...s, [t.torrent_id]: [...(s[t.torrent_id] || []), t]
+          _indexed[r.torrent_id] = [];
-    }), {});
+        }
-    const _peers = Object.values(peers).reduce((s, p) => ({
+        _indexed[r.torrent_id].push(r);
-      ...s, [p.torrent_id]: [...(s[p.torrent_id] || []), p]
+      });
-    }), {});
+      return _indexed;
+    };
+
+    const _files = index_by_tid(files);
+    const _trackers = index_by_tid(trackers);
+    const _peers = index_by_tid(peers);
+
     return (
       <div>
         {selection.length > 1 ? this.renderHeader.bind(this)() : null}

src/ui/torrent_table.js

@@ -12,55 +12,7 @@ const name_style = {
   whiteSpace: 'nowrap'
 };
 
-class TorrentTable extends Component {
+class _Torrent extends Component {
-  render() {
-    const { selection, torrents, dispatch } = this.props;
-    return (
-      <table className="table torrents">
-        <thead>
-          <tr>
-            <th style={{width: "1px"}}>
-              <input
-                type="checkbox"
-                checked={selection.length === Object.values(torrents).length}
-                onChange={e => {
-                  if (selection.length > 0) {
-                    dispatch(selectTorrent([], EXCLUSIVE));
-                  } else {
-                    dispatch(selectTorrent(Object.keys(torrents), EXCLUSIVE));
-                  }
-                }}
-              />
-            </th>
-            <th style={name_style}>name</th>
-            <th style={{ minWidth: '75px' }}>up</th>
-            <th style={{ minWidth: '75px' }}>down</th>
-            <th style={{width: "18rem"}}>
-              <span class="ratio">
-                <span>ratio</span>
-                <span></span>
-                <span></span>
-              </span>
-            </th>
-            <th>progress</th>
-          </tr>
-        </thead>
-        <tbody>
-          {Object.values(torrents).slice().sort((a, b) => a.name.localeCompare(b.name)).map(t =>
-            <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;
@@ -111,6 +63,60 @@ class Torrent extends Component {
   }
 }
 
+const Torrent = connect((state, props) => {
+  return {
+    torrent: state.torrents[props.id],
+    selection: state.selection,
+  };
+})(_Torrent);
+
+class TorrentTable extends Component {
+  render() {
+    const { selection, torrents, dispatch } = this.props;
+    return (
+      <table className="table torrents">
+        <thead>
+          <tr>
+            <th style={{width: "1px"}}>
+              <input
+                type="checkbox"
+                checked={selection.length === Object.values(torrents).length}
+                onChange={e => {
+                  if (selection.length > 0) {
+                    dispatch(selectTorrent([], EXCLUSIVE));
+                  } else {
+                    dispatch(selectTorrent(Object.keys(torrents), EXCLUSIVE));
+                  }
+                }}
+              />
+            </th>
+            <th style={name_style}>name</th>
+            <th style={{ minWidth: '75px' }}>up</th>
+            <th style={{ minWidth: '75px' }}>down</th>
+            <th style={{width: "18rem"}}>
+              <span class="ratio">
+                <span>ratio</span>
+                <span></span>
+                <span></span>
+              </span>
+            </th>
+            <th>progress</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.values(torrents).slice().sort((a, b) => a.name.localeCompare(b.name)).map(t =>
+            <Torrent
+              dispatch={dispatch}
+              id={t.id}
+              key={t.id}
+            />
+          )}
+        </tbody>
+      </table>
+    );
+  }
+}
+
 export default connect(state => ({
   torrents: state.torrents,
   selection: state.selection,