package updates, add why-did-you-update

package.json

@@ -22,16 +22,16 @@
   },
   "dependencies": {
     "file-saver": "^2.0.0-rc.4",
-    "gatsby": "^2.0.45",
+    "gatsby": "^2.0.50",
     "gatsby-image": "^2.0.20",
     "gatsby-plugin-favicon": "^3.1.4",
     "gatsby-plugin-matomo": "^0.5.0",
-    "gatsby-plugin-offline": "^2.0.13",
-    "gatsby-plugin-react-helmet": "^3.0.1",
+    "gatsby-plugin-offline": "^2.0.15",
+    "gatsby-plugin-react-helmet": "^3.0.2",
     "gatsby-plugin-sass": "^2.0.4",
     "gatsby-plugin-sharp": "^2.0.12",
     "gatsby-plugin-sitemap": "^2.0.2",
-    "gatsby-plugin-svgr": "next",
+    "gatsby-plugin-svgr": "^2.0.1",
     "gatsby-source-filesystem": "^2.0.8",
     "gatsby-transformer-json": "^2.1.5",
     "gatsby-transformer-sharp": "^2.1.8",
@@ -41,18 +41,19 @@
     "intersection-observer": "^0.5.1",
     "js-yaml": "^3.12.0",
     "node-sass": "^4.10.0",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
     "react-helmet": "^5.2.0",
     "react-markdown": "^4.0.3",
-    "react-pose": "^4.0.0",
+    "react-pose": "^4.0.2",
     "suncalc": "^1.8.0",
     "vcf": "^2.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.5",
+    "@babel/core": "^7.1.6",
     "@babel/node": "^7.0.0",
-    "@babel/preset-env": "^7.1.5",
+    "@babel/preset-env": "^7.1.6",
+    "@svgr/webpack": "^4.0.3",
     "ava": "^0.25.0",
     "babel-eslint": "^10.0.0",
     "chrome-launcher": "^0.10.5",
@@ -70,7 +71,8 @@
     "slugify": "^1.3.2",
     "stylelint": "^9.7.1",
     "stylelint-config-css-modules": "^1.3.0",
-    "stylelint-config-standard": "^18.2.0"
+    "stylelint-config-standard": "^18.2.0",
+    "why-did-you-update": "^1.0.6"
   },
   "browserslist": [
     "defaults"

src/components/Layout.jsx

@@ -7,6 +7,11 @@ import Header from './organisms/Header'
 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)
+}
+
 const timeout = 250
 
 export default class Layout extends PureComponent {

src/components/molecules/ProjectImage.jsx

@@ -1,21 +1,25 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import styles from './ProjectImage.module.scss'
 
-const ProjectImage = ({ fluid, alt }) => (
-  <Img
-    className={styles.projectImage}
-    backgroundColor="#6b7f88"
-    fluid={fluid}
-    alt={alt}
-  />
-)
+export default class ProjectImage extends PureComponent {
+  static propTypes = {
+    fluid: PropTypes.object.isRequired,
+    alt: PropTypes.string
+  }
 
-ProjectImage.propTypes = {
-  fluid: PropTypes.object.isRequired,
-  alt: PropTypes.string
+  render() {
+    return (
+      <Img
+        className={styles.projectImage}
+        backgroundColor="#6b7f88"
+        fluid={this.props.fluid}
+        alt={this.props.alt}
+      />
+    )
+  }
 }
 
 export const projectImage = graphql`
@@ -25,5 +29,3 @@ export const projectImage = graphql`
     }
   }
 `
-
-export default ProjectImage