[sitecore-jss-reactSwitching "deep-equal" package for "fast-deep-equa…

…l" - based on #1665 (#1719) * Switching "deep-equal" package for "fast-deep-equal". This gave a significant performance boost for Total Blocking Time, especially for large layout service payloads. * update yarn.lock * update yarn.lock * update changelog * use latest version of fast-deep-equal; @remove types/deep-equal * fix changelog entry * Minor update to CHANGELOG.md * Update CHANGELOG.md --------- Co-authored-by: David <[email protected]> Co-authored-by: Illia Kovalenko <[email protected]>
Sitecore · Jan 22, 2024 · 06a60f5 · 06a60f5
1 parent 5805a45
commit 06a60f5
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 81 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ Our versioning strategy is as follows:
 
 * `[nextjs/template]` `[sitecore-jss-nextjs]` On-demand ISR [#1674](https://github.com/Sitecore/jss/pull/1674))
 * `[sitecore-jss]` `[templates/nextjs-xmcloud]` Load the content styles for the RichText component ([#1670](https://github.com/Sitecore/jss/pull/1670))([#1683](https://github.com/Sitecore/jss/pull/1683)) ([#1684](https://github.com/Sitecore/jss/pull/1684)) ([#1693](https://github.com/Sitecore/jss/pull/1693))
+* `[templates/react]` `[sitecore-jss-react]` Replace package 'deep-equal' with 'fast-deep-equal'. No functionality change only performance improvement ([#1719](https://github.com/Sitecore/jss/pull/1719)) ([#1665](https://github.com/Sitecore/jss/pull/1665))
 
 ### 🐛 Bug Fixes
 

diff --git a/packages/create-sitecore-jss/src/templates/react/package.json b/packages/create-sitecore-jss/src/templates/react/package.json
@@ -32,7 +32,7 @@
     "axios": "^1.2.0",
     "bootstrap": "^5.2.3",
     "cross-fetch": "^3.1.5",
-    "deep-equal": "^2.1.0",
+    "fast-deep-equal": "^3.1.3",
     "graphql": "~16.8.1",
     "graphql-tag": "~2.12.6",
     "i18next": "^22.0.6",

diff --git a/packages/create-sitecore-jss/src/templates/react/src/Layout.js b/packages/create-sitecore-jss/src/templates/react/src/Layout.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Placeholder, VisitorIdentification } from '@sitecore-jss/sitecore-jss-react';
 import { NavLink } from 'react-router-dom';
 import { withTranslation } from 'react-i18next';
-import deepEqual from 'deep-equal';
+import fastDeepEqual from 'fast-deep-equal/es6/react';
 import Helmet from 'react-helmet';
 
 // Using bootstrap is completely optional. It's used here to provide a clean layout for samples,
@@ -82,7 +82,7 @@ const Layout = ({ route }) => (
 // We don't want to re-render `Layout` when route is changed but layout data is not loaded
 // Layout will be re-rendered only when layout data is changed
 const propsAreEqual = (prevProps, nextProps) => {
-  if (deepEqual(prevProps.route, nextProps.route)) return true;
+  if (fastDeepEqual(prevProps.route, nextProps.route)) return true;
 
   return false;
 };

diff --git a/packages/sitecore-jss-react/package.json b/packages/sitecore-jss-react/package.json
@@ -29,7 +29,6 @@
     "@sitecore-feaas/clientside": "^0.5.6",
     "@types/chai": "^4.3.4",
     "@types/chai-string": "^1.4.2",
-    "@types/deep-equal": "^1.0.1",
     "@types/enzyme": "^3.10.12",
     "@types/mocha": "^10.0.1",
     "@types/node": "18.11.10",
@@ -63,7 +62,7 @@
   },
   "dependencies": {
     "@sitecore-jss/sitecore-jss": "21.7.0-canary.51",
-    "deep-equal": "^2.1.0",
+    "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },

diff --git a/packages/sitecore-jss-react/src/components/SitecoreContext.tsx b/packages/sitecore-jss-react/src/components/SitecoreContext.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import PropTypes from 'prop-types';
-import deepEqual from 'deep-equal';
+import fastDeepEqual from 'fast-deep-equal/es6/react';
 import { ComponentFactory } from './sharedTypes';
 import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
 
@@ -70,7 +70,7 @@ export class SitecoreContext extends React.Component<SitecoreContextProps, Sitec
   componentDidUpdate(prevProps: SitecoreContextProps) {
     // In case if somebody will manage SitecoreContext state by passing fresh `layoutData` prop
     // instead of using `updateSitecoreContext`
-    if (!deepEqual(prevProps.layoutData, this.props.layoutData)) {
+    if (!fastDeepEqual(prevProps.layoutData, this.props.layoutData)) {
       this.setContext(this.props.layoutData);
 
       return;

diff --git a/yarn.lock b/yarn.lock
@@ -5650,7 +5650,6 @@ __metadata:
     "@sitecore-jss/sitecore-jss": 21.7.0-canary.51
     "@types/chai": ^4.3.4
     "@types/chai-string": ^1.4.2
-    "@types/deep-equal": ^1.0.1
     "@types/enzyme": ^3.10.12
     "@types/mocha": ^10.0.1
     "@types/node": 18.11.10
@@ -5663,11 +5662,11 @@ __metadata:
     chai: ^4.3.7
     chai-string: ^1.5.0
     cheerio: 1.0.0-rc.12
-    deep-equal: ^2.1.0
     del-cli: ^5.0.0
     enzyme: ^3.11.0
     eslint: ^8.28.0
     eslint-plugin-react: ^7.31.11
+    fast-deep-equal: ^3.1.3
     jsdom: ^20.0.3
     mocha: ^10.2.0
     nyc: ^15.1.0
@@ -6060,13 +6059,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/deep-equal@npm:^1.0.1":
-  version: 1.0.4
-  resolution: "@types/deep-equal@npm:1.0.4"
-  checksum: db905bcb051bc9cf5dceb231a6b0b64ab2318073939a1769e043454e8c46b1eeaac1376338751d2ee7ca9294398dd62e03d4b120361b56f96f89dc87aec753e4
-  languageName: node
-  linkType: hard
-
 "@types/del@npm:^4.0.0":
   version: 4.0.0
   resolution: "@types/del@npm:4.0.0"
@@ -11581,32 +11573,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal@npm:^2.1.0":
-  version: 2.2.3
-  resolution: "deep-equal@npm:2.2.3"
-  dependencies:
-    array-buffer-byte-length: ^1.0.0
-    call-bind: ^1.0.5
-    es-get-iterator: ^1.1.3
-    get-intrinsic: ^1.2.2
-    is-arguments: ^1.1.1
-    is-array-buffer: ^3.0.2
-    is-date-object: ^1.0.5
-    is-regex: ^1.1.4
-    is-shared-array-buffer: ^1.0.2
-    isarray: ^2.0.5
-    object-is: ^1.1.5
-    object-keys: ^1.1.1
-    object.assign: ^4.1.4
-    regexp.prototype.flags: ^1.5.1
-    side-channel: ^1.0.4
-    which-boxed-primitive: ^1.0.2
-    which-collection: ^1.0.1
-    which-typed-array: ^1.1.13
-  checksum: ee8852f23e4d20a5626c13b02f415ba443a1b30b4b3d39eaf366d59c4a85e6545d7ec917db44d476a85ae5a86064f7e5f7af7479f38f113995ba869f3a1ddc53
-  languageName: node
-  linkType: hard
-
 "deep-is@npm:^0.1.3, deep-is@npm:~0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -12481,23 +12447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-get-iterator@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "es-get-iterator@npm:1.1.3"
-  dependencies:
-    call-bind: ^1.0.2
-    get-intrinsic: ^1.1.3
-    has-symbols: ^1.0.3
-    is-arguments: ^1.1.1
-    is-map: ^2.0.2
-    is-set: ^2.0.2
-    is-string: ^1.0.7
-    isarray: ^2.0.5
-    stop-iteration-iterator: ^1.0.0
-  checksum: 8fa118da42667a01a7c7529f8a8cca514feeff243feec1ce0bb73baaa3514560bd09d2b3438873cf8a5aaec5d52da248131de153b28e2638a061b6e4df13267d
-  languageName: node
-  linkType: hard
-
 "es-iterator-helpers@npm:^1.0.12":
   version: 1.0.15
   resolution: "es-iterator-helpers@npm:1.0.15"
@@ -15555,7 +15504,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.5":
+"internal-slot@npm:^1.0.5":
   version: 1.0.6
   resolution: "internal-slot@npm:1.0.6"
   dependencies:
@@ -15612,16 +15561,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "is-arguments@npm:1.1.1"
-  dependencies:
-    call-bind: ^1.0.2
-    has-tostringtag: ^1.0.0
-  checksum: 7f02700ec2171b691ef3e4d0e3e6c0ba408e8434368504bb593d0d7c891c0dbfda6d19d30808b904a6cb1929bca648c061ba438c39f296c2a8ca083229c49f27
-  languageName: node
-  linkType: hard
-
 "is-array-buffer@npm:^3.0.1, is-array-buffer@npm:^3.0.2":
   version: 3.0.2
   resolution: "is-array-buffer@npm:3.0.2"
@@ -15866,7 +15805,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.1, is-map@npm:^2.0.2":
+"is-map@npm:^2.0.1":
   version: 2.0.2
   resolution: "is-map@npm:2.0.2"
   checksum: ace3d0ecd667bbdefdb1852de601268f67f2db725624b1958f279316e13fecb8fa7df91fd60f690d7417b4ec180712f5a7ee967008e27c65cfd475cc84337728
@@ -16001,7 +15940,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.1, is-set@npm:^2.0.2":
+"is-set@npm:^2.0.1":
   version: 2.0.2
   resolution: "is-set@npm:2.0.2"
   checksum: b64343faf45e9387b97a6fd32be632ee7b269bd8183701f3b3f5b71a7cf00d04450ed8669d0bd08753e08b968beda96fca73a10fd0ff56a32603f64deba55a57
@@ -24220,15 +24159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stop-iteration-iterator@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "stop-iteration-iterator@npm:1.0.0"
-  dependencies:
-    internal-slot: ^1.0.4
-  checksum: d04173690b2efa40e24ab70e5e51a3ff31d56d699550cfad084104ab3381390daccb36652b25755e420245f3b0737de66c1879eaa2a8d4fc0a78f9bf892fcb42
-  languageName: node
-  linkType: hard
-
 "stream-buffers@npm:2.2.x":
   version: 2.2.0
   resolution: "stream-buffers@npm:2.2.0"