diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 1d2d9f2..b2c0ecc 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -40,7 +40,7 @@ export default function Layout({ children, location }) {
     <>
       <Typekit />
       <HostnameCheck allowedHosts={allowedHosts} />
-      <ThemeSwitch />
+      {/* <ThemeSwitch /> */}
 
       <PoseGroup animateOnMount={process.env.NODE_ENV !== 'test'}>
         <RoutesContainer
diff --git a/src/components/atoms/HostnameCheck.jsx b/src/components/atoms/HostnameCheck.jsx
index 6545182..47bd904 100644
--- a/src/components/atoms/HostnameCheck.jsx
+++ b/src/components/atoms/HostnameCheck.jsx
@@ -1,45 +1,38 @@
-import React, { PureComponent } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { hostnameInfo } from './HostnameCheck.module.css'
 
-export default class HostnameCheck extends PureComponent {
-  static propTypes = {
-    allowedHosts: PropTypes.array.isRequired
-  }
+HostnameCheck.propTypes = {
+  allowedHosts: PropTypes.array.isRequired
+}
 
-  checkAllowedHost = () => {
+export default function HostnameCheck({ allowedHosts }) {
+  // default to true so SSR builds never show the banner
+  const [isAllowedHost, setIsAllowedHost] = useState(true)
+
+  const checkAllowedHost = () => {
     if (typeof window !== 'undefined' && window.location) {
-      return this.props.allowedHosts.includes(window.location.hostname)
+      return allowedHosts.includes(window.location.hostname)
     }
   }
 
-  state = {
-    // default to true so SSR builds never show the banner
-    isAllowedHost: true
-  }
+  useEffect(() => {
+    const isAllowedHost = checkAllowedHost()
+    setIsAllowedHost(isAllowedHost)
+  }, [])
 
-  componentDidMount() {
-    const isAllowedHost = this.checkAllowedHost()
-    this.setState({ isAllowedHost })
-  }
-
-  render() {
-    // return nothing if we're on an allowed host
-    if (this.state.isAllowedHost) return null
-
-    return (
-      <>
-        <Helmet>
-          <meta name="robots" content="noindex,nofollow" />
-        </Helmet>
-        <aside className={hostnameInfo}>
-          <p>{`Hi there 👋. Please note that only the code and documentation of this
+  return !isAllowedHost ? (
+    <>
+      <Helmet>
+        <meta name="robots" content="noindex,nofollow" />
+      </Helmet>
+      <aside className={hostnameInfo}>
+        <p>{`Hi there 👋. Please note that only the code and documentation of this
           site are open source. But my logo and the combination of typography,
           colors, and layout making up my brand identity are not. Don't just
           clone, do a remix.`}</p>
-        </aside>
-      </>
-    )
-  }
+      </aside>
+    </>
+  ) : null
 }
diff --git a/src/components/atoms/SEO.jsx b/src/components/atoms/SEO.jsx
index c417913..6798a58 100644
--- a/src/components/atoms/SEO.jsx
+++ b/src/components/atoms/SEO.jsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React 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
 }
 
-function SEO({ project }) {
+export default function SEO({ project }) {
   const meta = useMeta()
   const { basics } = useResume()
   const title = (project && project.title) || null
@@ -71,5 +71,3 @@ function SEO({ project }) {
     />
   )
 }
-
-export default memo(SEO)
diff --git a/src/components/atoms/Typekit.jsx b/src/components/atoms/Typekit.jsx
index 1e4b566..9dd9834 100644
--- a/src/components/atoms/Typekit.jsx
+++ b/src/components/atoms/Typekit.jsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import { Helmet } from 'react-helmet'
 import { useMeta } from '../../hooks/use-meta'
 
@@ -17,7 +17,7 @@ const TypekitScript = (typekitID) => (
   </script>
 )
 
-const Typekit = () => {
+export default function Typekit() {
   const { typekitID } = useMeta()
 
   return (
@@ -30,5 +30,3 @@ const Typekit = () => {
     </Helmet>
   )
 }
-
-export default memo(Typekit)
diff --git a/src/components/molecules/Availability.jsx b/src/components/molecules/Availability.jsx
index aade6fd..dc0963e 100644
--- a/src/components/molecules/Availability.jsx
+++ b/src/components/molecules/Availability.jsx
@@ -10,7 +10,7 @@ import {
 
 const Animation = posed.aside(fadeIn)
 
-const Availability = ({ hide }) => {
+export default function Availability({ hide }) {
   const { availability } = useMeta()
   const { status, available, unavailable } = availability
   const className = status
@@ -30,5 +30,3 @@ const Availability = ({ hide }) => {
 Availability.propTypes = {
   hide: PropTypes.bool
 }
-
-export default Availability
diff --git a/src/components/molecules/LogoUnit.jsx b/src/components/molecules/LogoUnit.jsx
index 066b24a..0b0bce3 100644
--- a/src/components/molecules/LogoUnit.jsx
+++ b/src/components/molecules/LogoUnit.jsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import posed from 'react-pose'
@@ -18,7 +18,7 @@ LogoUnit.propTypes = {
   isResume: PropTypes.bool
 }
 
-function LogoUnit({ minimal }) {
+export default function LogoUnit({ minimal }) {
   const { basics } = useResume()
   const Animation = posed.div(moveInBottom)
 
@@ -34,5 +34,3 @@ function LogoUnit({ minimal }) {
     </Animation>
   )
 }
-
-export default memo(LogoUnit)
diff --git a/src/components/molecules/Networks.jsx b/src/components/molecules/Networks.jsx
index 5ff469c..1212b0a 100644
--- a/src/components/molecules/Networks.jsx
+++ b/src/components/molecules/Networks.jsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import posed from 'react-pose'
 import { moveInTop } from '../atoms/Transitions'
@@ -30,7 +30,7 @@ NetworkLink.propTypes = {
   url: PropTypes.string.isRequired
 }
 
-function Networks({ small, hide }) {
+export default function Networks({ small, hide }) {
   const { basics } = useResume()
   if (hide) return null
 
@@ -51,8 +51,6 @@ function Networks({ small, hide }) {
   )
 }
 
-export default memo(Networks)
-
 Networks.propTypes = {
   small: PropTypes.bool,
   hide: PropTypes.bool
diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx
index e6c7721..24a094c 100644
--- a/src/components/organisms/Footer.jsx
+++ b/src/components/organisms/Footer.jsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import loadable from '@loadable/component'
 import LogoUnit from '../molecules/LogoUnit'
@@ -37,11 +37,9 @@ FooterMarkup.propTypes = {
   year: PropTypes.number.isRequired
 }
 
-function Footer() {
+export default function Footer() {
   const metaYaml = useMeta()
   const year = new Date().getFullYear()
 
   return <FooterMarkup year={year} meta={metaYaml} />
 }
-
-export default memo(Footer)
diff --git a/src/components/organisms/Repositories.jsx b/src/components/organisms/Repositories.jsx
index 51f64e2..fc458a2 100644
--- a/src/components/organisms/Repositories.jsx
+++ b/src/components/organisms/Repositories.jsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import Repository from '../molecules/Repository'
@@ -12,7 +12,7 @@ Repositories.propTypes = {
   repos: PropTypes.array
 }
 
-function Repositories({ repos }) {
+export default function Repositories({ repos }) {
   if (!repos) return null
 
   return (
@@ -26,5 +26,3 @@ function Repositories({ repos }) {
     </section>
   )
 }
-
-export default memo(Repositories)