Merge pull request #12 from ElrondDevGuild/main-layout-render-problems

Main layout render problems

.eslintrc

@@ -5,6 +5,9 @@
     "plugin:valtio/recommended",
     "plugin:@typescript-eslint/recommended"
   ],
+  "rules": {
+    "valtio/state-snapshot-rule": "off"
+  },
   "plugins": ["@typescript-eslint"],
   "parser": "@typescript-eslint/parser"
 }

CHANGELOG.md

@@ -1,3 +1,7 @@
+### [2.0.1](https://github.com/ElrondDevGuild/nextjs-dapp-template/releases/tag/v2.0.1)
+- fix problems with rerendering (wrong memo usage)
+- update dependencies
+
 ### [2.0.0](https://github.com/ElrondDevGuild/nextjs-dapp-template/releases/tag/v2.0.0) 
 - Nextjs update
 - React update

components/ui/MainLayout.tsx

@@ -1,32 +1,31 @@
 import { Container, Box } from '@chakra-ui/react';
-import { FC, memo, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { MetaHead, MetaHeadProps } from './MetaHead';
 import { Footer } from './Footer';
 
-export const MainLayout: FC<PropsWithChildren<MetaHeadProps>> = memo(
-  ({ children, metaTitle, metaDescription, metaImage, metaUrl }) => {
-    return (
-      <>
-        <MetaHead
-          metaTitle={metaTitle}
-          metaDescription={metaDescription}
-          metaImage={metaImage}
-          metaUrl={metaUrl}
-        />
-        <Box minHeight="calc(100vh - 120px)" pb="10">
-          <Container maxW="container.xl">
-            <Box>{children}</Box>
-          </Container>
-        </Box>
-        <Footer />
-      </>
-    );
-  },
-  (prev, next) =>
-    prev.metaTitle === next.metaTitle &&
-    prev.metaDescription === next.metaDescription &&
-    prev.metaImage === next.metaImage &&
-    prev.metaUrl === next.metaUrl
-);
+export const MainLayout: FC<PropsWithChildren<MetaHeadProps>> = ({
+  children,
+  metaTitle,
+  metaDescription,
+  metaImage,
+  metaUrl,
+}) => {
+  return (
+    <>
+      <MetaHead
+        metaTitle={metaTitle}
+        metaDescription={metaDescription}
+        metaImage={metaImage}
+        metaUrl={metaUrl}
+      />
+      <Box minHeight="calc(100vh - 120px)" pb="10">
+        <Container maxW="container.xl">
+          <Box>{children}</Box>
+        </Container>
+      </Box>
+      <Footer />
+    </>
+  );
+};
 
 MainLayout.displayName = 'MainLayout';