Adding reselect and working through selectors - massive render performance improvement

src/js/views/QueueHistory.js

@@ -11,8 +11,7 @@ import * as spotifyActions from '../services/spotify/actions';
 import * as mopidyActions from '../services/mopidy/actions';
 import { i18n, I18n } from '../locale';
 import Button from '../components/Button';
-import { arrayOf } from '../util/arrays';
-import { getItemsFromIndex } from '../util/selectors';
+import { queueHistorySelector } from '../util/selectors';
 
 class QueueHistory extends React.Component {
   componentDidMount() {
@@ -21,12 +20,6 @@ class QueueHistory extends React.Component {
     this.loadHistory();
   }
 
-  shouldComponentUpdate = ({ tracks: nextTracks }) => {
-    const { tracks } = this.props;
-
-    return nextTracks.length !== tracks.length;
-  }
-
   loadHistory = () => {
     const {
       mopidyActions: {
@@ -48,6 +41,8 @@ class QueueHistory extends React.Component {
       uiActions,
     } = this.props;
 
+    console.log('rendering')
+
     const options = (
       <Button
         onClick={this.onBack}
@@ -84,25 +79,9 @@ class QueueHistory extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => {
-  const {
-    mopidy: {
-      queue_history,
-    },
-  } = state;
-
-  const uris = arrayOf('uri', queue_history);
-  const storedTracks = getItemsFromIndex(state, uris);
-
-  const tracks = queue_history.map((item) => ({
-    ...item,
-    ...(storedTracks[item.uri] || {}),
-  }));
-
-  return {
-    tracks,
-  };
-};
+const mapStateToProps = (state) => ({
+  tracks: queueHistorySelector(state),
+});
 
 const mapDispatchToProps = (dispatch) => ({
   uiActions: bindActionCreators(uiActions, dispatch),