diff --git a/packages/create-sitecore-jss/src/templates/react/package.json b/packages/create-sitecore-jss/src/templates/react/package.json index 3bcc49e0be..03367e805d 100644 --- a/packages/create-sitecore-jss/src/templates/react/package.json +++ b/packages/create-sitecore-jss/src/templates/react/package.json @@ -36,7 +36,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.6.0", "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 f37565d9a0..e3e3d2bd85 100644 --- a/packages/sitecore-jss-react/package.json +++ b/packages/sitecore-jss-react/package.json @@ -64,7 +64,7 @@ }, "dependencies": { "@sitecore-jss/sitecore-jss": "21.7.0-canary.13", - "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