From 3ed442ec0fa9a7d9e1f001b0f3b7783801d17be6 Mon Sep 17 00:00:00 2001 From: ta264 Date: Mon, 9 Dec 2019 22:02:02 +0000 Subject: [PATCH] Fixed: Faster hasDifferentItems and specialized OrOrder version --- frontend/src/Artist/Index/ArtistIndex.js | 9 ++++---- .../Index/Banners/ArtistIndexBanners.js | 4 ++-- .../Index/Overview/ArtistIndexOverviews.js | 4 ++-- .../Index/Posters/ArtistIndexPosters.js | 4 ++-- .../src/Utilities/Object/hasDifferentItems.js | 19 ++++++++++++----- .../Object/hasDifferentItemsOrOrder.js | 21 +++++++++++++++++++ 6 files changed, 45 insertions(+), 16 deletions(-) create mode 100644 frontend/src/Utilities/Object/hasDifferentItemsOrOrder.js diff --git a/frontend/src/Artist/Index/ArtistIndex.js b/frontend/src/Artist/Index/ArtistIndex.js index f88ffda52..439d18800 100644 --- a/frontend/src/Artist/Index/ArtistIndex.js +++ b/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(); } diff --git a/frontend/src/Artist/Index/Banners/ArtistIndexBanners.js b/frontend/src/Artist/Index/Banners/ArtistIndexBanners.js index 28cfdf14c..358ba2ef6 100644 --- a/frontend/src/Artist/Index/Banners/ArtistIndexBanners.js +++ b/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 || diff --git a/frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js b/frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js index 8b23cdf95..a8162ab9e 100644 --- a/frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js +++ b/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 ( diff --git a/frontend/src/Artist/Index/Posters/ArtistIndexPosters.js b/frontend/src/Artist/Index/Posters/ArtistIndexPosters.js index 3650db93e..6fe9da097 100644 --- a/frontend/src/Artist/Index/Posters/ArtistIndexPosters.js +++ b/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 || diff --git a/frontend/src/Utilities/Object/hasDifferentItems.js b/frontend/src/Utilities/Object/hasDifferentItems.js index f89c99a10..826aab7c3 100644 --- a/frontend/src/Utilities/Object/hasDifferentItems.js +++ b/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; diff --git a/frontend/src/Utilities/Object/hasDifferentItemsOrOrder.js b/frontend/src/Utilities/Object/hasDifferentItemsOrOrder.js new file mode 100644 index 000000000..e2acbc5c0 --- /dev/null +++ b/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;