diff --git a/CHANGELOG.md b/CHANGELOG.md index 91f767b14f..f45e2ab813 100644 --- 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 index 95c1737797..e42d52bea2 100644 --- 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 index d98dce5da5..dd30b4805a 100644 --- 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 index 87d6a0faf7..0facc98064 100644 --- 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 index 2b2bb42160..47213d6a62 100644 --- 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