[Next.js] Remove withSitecoreContext HOC from Layout.tsx (#887)

* [Next.js] Remove withSitecoreContext HOC from `Layout.tsx` * Update Layout.tsx * Remove React.memo * use prettier * Remove deep-equal
Sitecore · Dec 15, 2021 · 3f93d5e · 3f93d5e
1 parent c5d4a0d
commit 3f93d5e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 16 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -30,7 +30,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@sitecore-jss/sitecore-jss-nextjs": "^20.0.0-canary",
-    "deep-equal": "^2.0.5",
     "graphql": "~15.4.0",
     "graphql-tag": "^2.11.0",
     "next": "^12.0.4",
@@ -47,7 +46,6 @@
     "@graphql-codegen/typescript-resolvers": "^1.17.10",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@sitecore-jss/sitecore-jss-cli": "^20.0.0-canary",
-    "@types/deep-equal": "^1.0.1",
     "@types/node": "^14.6.4",
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.9",

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/Layout.tsx b/packages/create-sitecore-jss/src/templates/nextjs/src/Layout.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import Head from 'next/head';
-import deepEqual from 'deep-equal';
 import {
   Placeholder,
   VisitorIdentification,
-  withSitecoreContext,
   getPublicUrl,
-  SitecoreContextValue,
+  LayoutServiceData,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import Navigation from 'src/Navigation';
 
@@ -15,10 +13,12 @@ import Navigation from 'src/Navigation';
 const publicUrl = getPublicUrl();
 
 interface LayoutProps {
-  sitecoreContext: SitecoreContextValue;
+  layoutData: LayoutServiceData;
 }
 
-const Layout = ({ sitecoreContext: { route } }: LayoutProps): JSX.Element => {
+const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
+  const { route } = layoutData.sitecore;
+
   return (
     <>
       <Head>
@@ -38,16 +38,12 @@ const Layout = ({ sitecoreContext: { route } }: LayoutProps): JSX.Element => {
       <Navigation />
       {/* root placeholder for the app, which we add components to using route data */}
       <div className="container">
-        {route && <Placeholder name="<%- appPrefix ? `${appName}-` : '' %>jss-main" rendering={route} />}
+        {route && (
+          <Placeholder name="<%- appPrefix ? `${appName}-` : '' %>jss-main" rendering={route} />
+        )}
       </div>
     </>
   );
 };
 
-const propsAreEqual = (prevProps: LayoutProps, nextProps: LayoutProps) => {
-  if (deepEqual(prevProps.sitecoreContext.route, nextProps.sitecoreContext.route)) return true;
-
-  return false;
-};
-
-export default withSitecoreContext()(React.memo(Layout, propsAreEqual));
+export default Layout;
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/pages/[[...path]].tsx b/packages/create-sitecore-jss/src/templates/nextjs/src/pages/[[...path]].tsx
@@ -32,7 +32,7 @@ const SitecorePage = ({ notFound, componentProps, layoutData }: SitecorePageProp
   return (
     <ComponentPropsContext value={componentProps}>
       <SitecoreContext componentFactory={componentFactory} layoutData={layoutData}>
-        <Layout />
+        <Layout layoutData={layoutData} />
       </SitecoreContext>
     </ComponentPropsContext>
   );