less components re-rendering across the board

src/components/molecules/Availability.jsx

@@ -1,12 +1,11 @@
-import React, { Fragment, Component } from 'react'
+import React, { Fragment, PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { MoveIn } from '../atoms/Animations'
 import './Availability.scss'
 
-class Availability extends Component {
+class Availability extends PureComponent {
   constructor(props) {
     super(props)
-    this.handleScroll = this.handleScroll.bind(this)
   }
 
   componentDidMount() {
@@ -36,7 +35,7 @@ class Availability extends Component {
     window.removeEventListener('scroll', this.handleScroll)
   }
 
-  handleScroll() {
+  handleScroll = () => {
     let timeout
     const footer = document.getElementsByClassName('footer')[0]
     const availability = document.getElementsByClassName('availability')[0]

src/components/molecules/Social.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import { FadeIn } from '../atoms/Animations'
@@ -29,16 +29,42 @@ const SocialIcon = props => {
   }
 }
 
-const Social = ({ meta, minimal, hide }) => {
+class Social extends PureComponent {
-  const { social } = meta
+  constructor(props) {
-  const classes = minimal ? 'networks networks--minimal' : 'networks'
+    super(props)
+
+    this.state = { classes: 'networks' }
+  }
+
+  componentDidMount() {
+    this.toggleClasses()
+  }
+
+  componentDidUpdate() {
+    this.toggleClasses()
+  }
+
+  toggleClasses = () => {
+    if (this.props.minimal) {
+      this.setState({ classes: 'networks' })
+    } else {
+      this.setState({ classes: 'networks networks--minimal' })
+    }
+  }
+
+  render() {
+    const { social } = this.props.meta
 
     return (
-    !hide && (
+      !this.props.hide && (
         <FadeIn timeout={{ enter: 200, exit: 0, appear: 200 }}>
-        <aside className={classes}>
+          <aside className={this.state.classes}>
             {Object.keys(social).map((key, i) => (
-            <OutboundLink className="networks__link" href={social[key]} key={i}>
+              <OutboundLink
+                className="networks__link"
+                href={social[key]}
+                key={i}
+              >
                 <SocialIcon title={key} className="icon" />
                 <span className="networks__title">{key}</span>
               </OutboundLink>
@@ -48,6 +74,7 @@ const Social = ({ meta, minimal, hide }) => {
       )
     )
   }
+}
 
 Social.propTypes = {
   meta: PropTypes.object,

src/components/molecules/ThemeSwitch.jsx

@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import { FadeIn } from '../atoms/Animations'
 import { ReactComponent as Day } from '../../images/day.svg'
 import { ReactComponent as Night } from '../../images/night.svg'
 import './ThemeSwitch.scss'
 
-class ThemeSwitch extends Component {
+class ThemeSwitch extends PureComponent {
   constructor(props) {
     super(props)
 
@@ -34,7 +34,9 @@ class ThemeSwitch extends Component {
   }
 
   toggleTheme = () => {
-    document.getElementsByClassName('app')[0].classList.toggle('dark', this.state.dark)
+    document
+      .getElementsByClassName('app')[0]
+      .classList.toggle('dark', this.state.dark)
   }
 
   render() {

src/components/organisms/Footer.jsx

@@ -1,14 +1,15 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import FileSaver from 'file-saver'
 import vCard from '../../lib/vcf/vcard'
 import Social from '../molecules/Social'
 import './Footer.scss'
 
-class Footer extends Component {
+class Footer extends PureComponent {
   constructor(props) {
     super(props)
-    this.handleAddressbookClick = this.handleAddressbookClick.bind(this)
+
+    this.state = { year: new Date().getFullYear() }
   }
 
   generateFileName() {
@@ -43,13 +44,12 @@ class Footer extends Component {
     FileSaver.saveAs(blob, this.generateFileName())
   }
 
-  handleAddressbookClick(e) {
+  handleAddressbookClick = (e) => {
     e.preventDefault()
     this.constructVcard()
   }
 
   render() {
-    const year = new Date().getFullYear()
     const meta = this.props.meta
 
     return (
@@ -66,7 +66,7 @@ class Footer extends Component {
         </p>
         <p>
           <small>
-            &copy; {year} {meta.title} &mdash; All Rights Reserved
+            &copy; {this.state.year} {meta.title} &mdash; All Rights Reserved
           </small>
         </p>
       </footer>

src/components/organisms/Header.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import Link from 'gatsby-link'
 import PropTypes from 'prop-types'
 import { FadeIn } from '../atoms/Animations'
@@ -8,16 +8,35 @@ import ThemeSwitch from '../molecules/ThemeSwitch'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 import './Header.scss'
 
-class Header extends Component {
+class Header extends PureComponent {
-  render() {
+  constructor(props) {
-    const isHomepage = this.props.isHomepage
+    super(props)
-    const meta = this.props.meta
 
-    let classes = 'header'
+    this.state = { classes: 'header' }
-    if (!isHomepage) classes += ' header--minimal'
+  }
+
+  componentDidMount() {
+    this.toggleClasses()
+  }
+
+  componentDidUpdate() {
+    this.toggleClasses()
+  }
+
+  toggleClasses = () => {
+    if (this.props.isHomepage) {
+      this.setState({ classes: 'header' })
+    } else {
+      this.setState({ classes: 'header header--minimal' })
+    }
+  }
+
+  render() {
+    const meta = this.props.meta
+    const isHomepage = this.props.isHomepage
 
     return (
-      <header className={classes}>
+      <header className={this.state.classes}>
         <ThemeSwitch />
         <FadeIn>
           <Link className="header__name" to={'/'}>

src/templates/Project.jsx

@@ -12,8 +12,14 @@ import SEO from '../components/atoms/SEO'
 import './Project.scss'
 
 class Project extends Component {
-  constructor() {
+  constructor(props) {
-    super()
+    super(props)
+
+    const description = this.props.data.projectsYaml.description
+
+    this.state = {
+      descriptionWithLineBreaks: description.split('\n').join('\n\n')
+    }
   }
 
   render() {
@@ -22,9 +28,8 @@ class Project extends Component {
     const projectImages = this.props.data.projectImages.edges
     const pathContext = this.props.pathContext
 
-    const { title, description, links, techstack } = project
+    const { title, links, techstack } = project
     const { next, previous } = pathContext
-    const descriptionWithLineBreaks = description.split('\n').join('\n\n')
 
     return (
       <Fragment>
@@ -38,7 +43,7 @@ class Project extends Component {
           <Content>
             <h1 className="project__title">{title}</h1>
             <ReactMarkdown
-              source={descriptionWithLineBreaks}
+              source={this.state.descriptionWithLineBreaks}
               className="project__description"
             />