less re-renders for header & footer

package-lock.json

@@ -2796,6 +2796,15 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@welldone-software/why-did-you-render": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-3.3.9.tgz",
+      "integrity": "sha512-uH8gQvggyAvrRdib2+n+/ZwbVtUhap2Tvere+Bb3KWAE6K4rdgZMUtjtovjbLaAqR4zN4XWGLjp7Dc/MAhBKoQ==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4"
+      }
+    },
     "@wry/equality": {
       "version": "0.1.9",
       "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.9.tgz",
@@ -25209,16 +25218,6 @@
       "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
       "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs="
     },
-    "why-did-you-update": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/why-did-you-update/-/why-did-you-update-1.0.6.tgz",
-      "integrity": "sha512-XVrdHhdrPBDuSW8b/uH6DCb1/0984qv8KElpE8NZiRvWZX8nw49av577+ZyIrxSNesi6r2cQEhpxQTKFFHTj8A==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.11",
-        "react-fast-compare": "^2.0.3"
-      }
-    },
     "wide-align": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",

package.json

@@ -102,6 +102,7 @@
     "@types/shortid": "0.0.29",
     "@typescript-eslint/eslint-plugin": "^2.6.1",
     "@typescript-eslint/parser": "^2.6.1",
+    "@welldone-software/why-did-you-render": "^3.3.9",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "eslint": "^6.6.0",
@@ -129,8 +130,7 @@
     "stylelint-config-standard": "^19.0.0",
     "stylelint-prettier": "^1.1.1",
     "ts-jest": "^24.1.0",
-    "typescript": "^3.7.2",
-    "why-did-you-update": "^1.0.6"
+    "typescript": "^3.7.2"
   },
   "repository": {
     "type": "git",

src/components/Layout.tsx

@@ -6,8 +6,9 @@ import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'
 
 // if (process.env.NODE_ENV !== 'production') {
-//   const { whyDidYouUpdate } = require('why-did-you-update')
-//   whyDidYouUpdate(React)
+//   // eslint-disable-next-line
+//   const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js')
+//   whyDidYouRender(React)
 // }
 
 export default function Layout({

src/components/atoms/Typekit.tsx

@@ -20,14 +20,12 @@ const TypekitScript = (typekitID: string) => (
 export default function Typekit() {
   const { typekitID } = useSiteMetadata()
 
-  return (
-    typekitID && (
-      <Helmet>
-        <link rel="dns-prefetch" href="https://use.typekit.net/" />
-        <link rel="dns-prefetch" href="https://p.typekit.net/" />
+  return typekitID ? (
+    <Helmet>
+      <link rel="dns-prefetch" href="https://use.typekit.net/" />
+      <link rel="dns-prefetch" href="https://p.typekit.net/" />
 
-        {TypekitScript(typekitID)}
-      </Helmet>
-    )
-  )
+      {TypekitScript(typekitID)}
+    </Helmet>
+  ) : null
 }

src/components/organisms/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { Link } from 'gatsby'
 import Container from '../atoms/Container'
 import Icon from '../atoms/Icon'
@@ -32,15 +32,17 @@ function Copyright() {
   )
 }
 
-export default function Footer() {
-  return (
-    <footer role="contentinfo" className={styles.footer}>
-      <Container>
-        <ThemeSwitch />
-        <Vcard />
+export default class Footer extends PureComponent {
+  render() {
+    return (
+      <footer role="contentinfo" className={styles.footer}>
+        <Container>
+          <ThemeSwitch />
+          <Vcard />
 
-        <Copyright />
-      </Container>
-    </footer>
-  )
+          <Copyright />
+        </Container>
+      </footer>
+    )
+  }
 }

src/components/organisms/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { Link } from 'gatsby'
 import Container from '../atoms/Container'
 import Search from '../molecules/Search'
@@ -7,23 +7,25 @@ import { ReactComponent as Logo } from '../../images/logo.svg'
 
 import styles from './Header.module.scss'
 
-export default function Header() {
-  return (
-    <header role="banner" className={styles.header}>
-      <Container>
-        <div className={styles.headerContent}>
-          <h1 className={styles.title}>
-            <Link to="/">
-              <Logo /> kremalicious
-            </Link>
-          </h1>
+export default class Header extends PureComponent {
+  render() {
+    return (
+      <header role="banner" className={styles.header}>
+        <Container>
+          <div className={styles.headerContent}>
+            <h1 className={styles.title}>
+              <Link to="/">
+                <Logo /> kremalicious
+              </Link>
+            </h1>
 
-          <nav role="navigation" className={styles.nav}>
-            <Search lng="en" />
-            <Menu />
-          </nav>
-        </div>
-      </Container>
-    </header>
-  )
+            <nav role="navigation" className={styles.nav}>
+              <Search lng="en" />
+              <Menu />
+            </nav>
+          </div>
+        </Container>
+      </header>
+    )
+  }
 }