Fixed: Faster hasDifferentItems and specialized OrOrder version

frontend/src/Artist/Index/ArtistIndex.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import { align, icons, sortDirections } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -75,10 +75,9 @@ class ArtistIndex extends Component {
       scrollTop
     } = this.props;
 
-    if (
-      hasDifferentItems(prevProps.items, items) ||
-      sortKey !== prevProps.sortKey ||
-      sortDirection !== prevProps.sortDirection
+    if (sortKey !== prevProps.sortKey ||
+        sortDirection !== prevProps.sortDirection ||
+        hasDifferentItemsOrOrder(prevProps.items, items)
     ) {
       this.setJumpBarItems();
     }

frontend/src/Artist/Index/Banners/ArtistIndexBanners.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Grid, WindowScroller } from 'react-virtualized';
 import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import dimensions from 'Styles/Variables/dimensions';
 import { sortDirections } from 'Helpers/Props';
 import Measure from 'Components/Measure';
@@ -123,7 +123,7 @@ class ArtistIndexBanners extends Component {
       jumpToCharacter
     } = this.props;
 
-    const itemsChanged = hasDifferentItems(prevProps.items, items);
+    const itemsChanged = hasDifferentItemsOrOrder(prevProps.items, items);
 
     if (
       prevProps.sortKey !== sortKey ||

frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Grid, WindowScroller } from 'react-virtualized';
 import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import dimensions from 'Styles/Variables/dimensions';
 import { sortDirections } from 'Helpers/Props';
 import Measure from 'Components/Measure';
@@ -84,7 +84,7 @@ class ArtistIndexOverviews extends Component {
       jumpToCharacter
     } = this.props;
 
-    const itemsChanged = hasDifferentItems(prevProps.items, items);
+    const itemsChanged = hasDifferentItemsOrOrder(prevProps.items, items);
     const overviewOptionsChanged = !_.isMatch(prevProps.overviewOptions, overviewOptions);
 
     if (

frontend/src/Artist/Index/Posters/ArtistIndexPosters.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Grid, WindowScroller } from 'react-virtualized';
 import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import dimensions from 'Styles/Variables/dimensions';
 import { sortDirections } from 'Helpers/Props';
 import Measure from 'Components/Measure';
@@ -123,7 +123,7 @@ class ArtistIndexPosters extends Component {
       jumpToCharacter
     } = this.props;
 
-    const itemsChanged = hasDifferentItems(prevProps.items, items);
+    const itemsChanged = hasDifferentItemsOrOrder(prevProps.items, items);
 
     if (
       prevProps.sortKey !== sortKey ||

frontend/src/Utilities/Object/hasDifferentItems.js

@@ -1,10 +1,19 @@
-import _ from 'lodash';
-
 function hasDifferentItems(prevItems, currentItems, idProp = 'id') {
-  const diff1 = _.differenceBy(prevItems, currentItems, (item) => item[idProp]);
-  const diff2 = _.differenceBy(currentItems, prevItems, (item) => item[idProp]);
+  if (prevItems === currentItems) {
+    return false;
+  }
+
+  if (prevItems.length !== currentItems.length) {
+    return true;
+  }
+
+  const currentItemIds = new Set();
+
+  currentItems.forEach((currentItem) => {
+    currentItemIds.add(currentItem[idProp]);
+  });
 
-  return diff1.length > 0 || diff2.length > 0;
+  return prevItems.every((prevItem) => currentItemIds.has(prevItem[idProp]));
 }
 
 export default hasDifferentItems;

frontend/src/Utilities/Object/hasDifferentItemsOrOrder.js

@@ -0,0 +1,21 @@
+function hasDifferentItemsOrOrder(prevItems, currentItems, idProp = 'id') {
+  if (prevItems === currentItems) {
+    return false;
+  }
+
+  const len = prevItems.length;
+
+  if (len !== currentItems.length) {
+    return true;
+  }
+
+  for (let i = 0; i < len; i++) {
+    if (prevItems[i][idProp] !== currentItems[i][idProp]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export default hasDifferentItemsOrOrder;