more pure components

package.json

@@ -26,21 +26,21 @@
     "@loadable/component": "^5.10.3",
     "axios": "^0.19.0",
     "file-saver": "^2.0.2",
-    "gatsby": "^2.18.3",
+    "gatsby": "^2.18.4",
-    "gatsby-image": "^2.2.33",
+    "gatsby-image": "^2.2.34",
-    "gatsby-plugin-manifest": "^2.2.29",
+    "gatsby-plugin-manifest": "^2.2.30",
     "gatsby-plugin-matomo": "^0.7.2",
-    "gatsby-plugin-offline": "^3.0.23",
+    "gatsby-plugin-offline": "^3.0.24",
-    "gatsby-plugin-react-helmet": "^3.1.15",
+    "gatsby-plugin-react-helmet": "^3.1.16",
-    "gatsby-plugin-sass": "^2.1.23",
+    "gatsby-plugin-sass": "^2.1.24",
-    "gatsby-plugin-sharp": "^2.3.3",
+    "gatsby-plugin-sharp": "^2.3.4",
-    "gatsby-plugin-sitemap": "^2.2.21",
+    "gatsby-plugin-sitemap": "^2.2.22",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-plugin-webpack-size": "^1.0.0",
-    "gatsby-source-filesystem": "^2.1.38",
+    "gatsby-source-filesystem": "^2.1.39",
-    "gatsby-transformer-json": "^2.2.19",
+    "gatsby-transformer-json": "^2.2.20",
-    "gatsby-transformer-sharp": "^2.3.5",
+    "gatsby-transformer-sharp": "^2.3.6",
-    "gatsby-transformer-yaml": "^2.2.17",
+    "gatsby-transformer-yaml": "^2.2.18",
     "giphy-js-sdk-core": "^1.0.6",
     "graphql": "^14.5.8",
     "intersection-observer": "^0.7.0",
@@ -66,9 +66,10 @@
     "@svgr/webpack": "^4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
+    "@welldone-software/why-did-you-render": "^3.3.9",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "babel-preset-gatsby": "^0.2.22",
+    "babel-preset-gatsby": "^0.2.23",
     "chalk": "^3.0.0",
     "eslint": "^6.7.1",
     "eslint-config-prettier": "^6.7.0",

src/components/Layout.jsx

@@ -10,9 +10,11 @@ import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'
 import { useMeta } from '../hooks/use-meta'
 
+// https://github.com/welldone-software/why-did-you-render
 // if (process.env.NODE_ENV !== 'production') {
-//   const { whyDidYouUpdate } = require('why-did-you-update')
+//   // eslint-disable-next-line
-//   whyDidYouUpdate(React)
+//   const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js')
+//   whyDidYouRender(React)
 // }
 
 Layout.propTypes = {

src/components/atoms/SEO.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import Helmet from 'react-helmet'
 import PropTypes from 'prop-types'
 import { useMeta } from '../../hooks/use-meta'
@@ -51,7 +51,7 @@ SEO.propTypes = {
   project: PropTypes.object
 }
 
-export default function SEO({ project }) {
+function SEO({ project }) {
   const meta = useMeta()
   const { basics } = useResume()
   const title = (project && project.title) || null
@@ -71,3 +71,5 @@ export default function SEO({ project }) {
     />
   )
 }
+
+export default memo(SEO)

src/components/atoms/Typekit.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import Helmet from 'react-helmet'
 import { useMeta } from '../../hooks/use-meta'
 
@@ -31,4 +31,4 @@ const Typekit = () => {
   )
 }
 
-export default Typekit
+export default memo(Typekit)

src/components/molecules/LogoUnit.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import posed from 'react-pose'
@@ -12,7 +12,7 @@ LogoUnit.propTypes = {
   isResume: PropTypes.bool
 }
 
-export default function LogoUnit({ minimal }) {
+function LogoUnit({ minimal }) {
   const { basics } = useResume()
   const Animation = posed.div(moveInBottom)
 
@@ -30,3 +30,5 @@ export default function LogoUnit({ minimal }) {
     </Animation>
   )
 }
+
+export default memo(LogoUnit)

src/components/molecules/Networks.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import posed from 'react-pose'
 import { moveInTop } from '../atoms/Transitions'
@@ -25,7 +25,7 @@ NetworkLink.propTypes = {
   url: PropTypes.string.isRequired
 }
 
-export default function Networks({ small, hide }) {
+function Networks({ small, hide }) {
   const { basics } = useResume()
   if (hide) return null
 
@@ -46,6 +46,8 @@ export default function Networks({ small, hide }) {
   )
 }
 
+export default memo(Networks)
+
 Networks.propTypes = {
   small: PropTypes.bool,
   hide: PropTypes.bool

src/components/molecules/ThemeSwitch.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import useDarkMode from '../../hooks/use-dark-mode'
@@ -33,9 +33,13 @@ ThemeToggleInput.propTypes = {
   toggleDark: PropTypes.func.isRequired
 }
 
-export default function ThemeSwitch() {
+function ThemeSwitch() {
   const { darkMode, toggleDark } = useDarkMode()
-  const themeColor = darkMode ? '#1d2224' : '#e7eef4'
+  const [themeColor, setThemeColor] = useState()
+
+  useEffect(() => {
+    darkMode ? setThemeColor('#1d2224') : setThemeColor('#e7eef4')
+  }, [darkMode])
 
   return (
     <>
@@ -57,3 +61,5 @@ export default function ThemeSwitch() {
     </>
   )
 }
+
+export default memo(ThemeSwitch)

src/components/organisms/Footer.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
 import loadable from '@loadable/component'
@@ -48,10 +48,12 @@ FooterMarkup.propTypes = {
   year: PropTypes.number.isRequired
 }
 
-export default function Footer() {
+function Footer() {
   const metaYaml = useMeta()
   const { portfolioJson } = useStaticQuery(query)
   const year = new Date().getFullYear()
 
   return <FooterMarkup year={year} pkg={portfolioJson} meta={metaYaml} />
 }
+
+export default memo(Footer)

src/components/organisms/Header.jsx

@@ -16,15 +16,17 @@ export default function Header({ minimal, hide }) {
   const { availability } = useMeta()
 
   return (
-    <header className={minimal ? styles.minimal : styles.header}>
+    <>
       <ThemeSwitch />
-      {!hide && (
+      <header className={minimal ? styles.minimal : styles.header}>
-        <>
+        {!hide && (
-          <LogoUnit minimal={minimal} />
+          <>
-          <Networks hide={minimal} />
+            <LogoUnit minimal={minimal} />
-          <Availability hide={minimal && !availability.status} />
+            <Networks hide={minimal} />
-        </>
+            <Availability hide={minimal && !availability.status} />
-      )}
+          </>
-    </header>
+        )}
+      </header>
+    </>
   )
 }

src/components/organisms/Repositories.jsx

@@ -1,26 +1,26 @@
-import React, { PureComponent } from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 
 import Repository from '../molecules/Repository'
 import styles from './Repositories.module.scss'
 
-export default class Repositories extends PureComponent {
+Repositories.propTypes = {
-  static propTypes = {
+  repos: PropTypes.array
-    repos: PropTypes.array
-  }
-
-  render() {
-    if (!this.props.repos) return null
-
-    return (
-      <section className={styles.section}>
-        <h1 className={styles.sectionTitle}>Open Source Projects</h1>
-        <div className={styles.repos}>
-          {this.props.repos.map(repo => (
-            <Repository key={repo.name} repo={repo} />
-          ))}
-        </div>
-      </section>
-    )
-  }
 }
+
+function Repositories({ repos }) {
+  if (!repos) return null
+
+  return (
+    <section className={styles.section}>
+      <h1 className={styles.sectionTitle}>Open Source Projects</h1>
+      <div className={styles.repos}>
+        {repos.map(repo => (
+          <Repository key={repo.name} repo={repo} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default memo(Repositories)

src/pages/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import shortid from 'shortid'
@@ -56,7 +56,7 @@ Home.propTypes = {
   pageContext: PropTypes.object.isRequired
 }
 
-export default function Home({ data, pageContext }) {
+function Home({ data, pageContext }) {
   const projects = data.allProjectsYaml.edges
   const images = data.projectImageFiles.edges
 
@@ -75,6 +75,8 @@ export default function Home({ data, pageContext }) {
   )
 }
 
+export default memo(Home)
+
 export const IndexQuery = graphql`
   query {
     allProjectsYaml {