use react-addons-shallow-compare for comparing state

components/Editor.js

@@ -6,7 +6,7 @@ import { DragDropContext } from 'react-dnd'
 import domtoimage from 'dom-to-image'
 import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
 import Spinner from 'react-spinner'
-import shallowEquals from '../lib/shallow-equals'
+import shallowCompare from 'react-addons-shallow-compare'
 
 // Ours
 import Button from './Button'
@@ -115,7 +115,8 @@ class Editor extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if(!shallowEquals(this.state, prevState)) {
+    // this.props ensures props are not compared, only state
+    if (shallowCompare(this, this.props, prevState)) {
       this.props.onUpdate(this.state)
     }
   }

lib/routing.js

@@ -80,12 +80,16 @@ export const updateQueryString = (router, state) => {
   const mappedState = mapper.map(reverseMappings, state)
   serializeCode(mappedState)
 
-  router.replace({
+  router.replace(
+    {
       pathname: router.pathname
-  }, {
+    },
+    {
       pathname: router.pathname,
       query: mappedState
-  }, {shallow: true})
+    },
+    { shallow: true }
+  )
 }
 
 // private

lib/shallow-equals.js

@@ -1,25 +0,0 @@
-export default function shallowEquals (a, b) {
-  for (const i in a) {
-    // NaN === NaN is false in Javascript
-    if(isNaN(b[i]) && isNaN(a[i])) {
-      continue
-    }
-    if (b[i] !== a[i]) {
-      console.log('DID NOT MATCH', i, a[i], b[i])
-      return false
-    }
-  }
-
-  for (const i in b) {
-    // NaN === NaN is false in Javascript
-    if(isNaN(b[i]) && isNaN(a[i])) {
-      continue
-    }
-
-    if (b[i] !== a[i]) {
-      return false
-    }
-  }
-
-  return true
-}

package.json

@@ -37,6 +37,7 @@
     "next-offline": "^2.9.0",
     "prettier": "^1.8.1",
     "react": "16.3.*",
+    "react-addons-shallow-compare": "^15.6.2",
     "react-click-outside": "^3.0.0",
     "react-codemirror2": "^5.1.0",
     "react-color": "^2.13.8",

pages/index.js

@@ -10,23 +10,23 @@ import { updateQueryString } from '../lib/routing'
 import { saveState } from '../lib/util'
 
 class Index extends React.Component {
+  onEditorUpdate = state => {
+    updateQueryString(this.props.router, state)
+    const s = { ...state }
+    delete s.code
+    delete s.backgroundImage
+    delete s.backgroundImageSelection
+    saveState(localStorage, s)
+  }
+
   render() {
     const { router } = this.props
     return (
       <Page enableHeroText={true}>
-        <Editor {...router} onUpdate={(state) => onEditorUpdate(router, state)} api={api} />
+        <Editor {...router} onUpdate={this.onEditorUpdate} api={api} />
       </Page>
     )
   }
 }
 
-function onEditorUpdate(router, state) {
-  updateQueryString(router, state)
-  const s = { ...state }
-  delete s.code
-  delete s.backgroundImage
-  delete s.backgroundImageSelection
-  saveState(localStorage, s)
-}
-
 export default withRouter(Index)

yarn.lock

@@ -2391,7 +2391,7 @@ fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
-fbjs@^0.8.1, fbjs@^0.8.16:
+fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.4:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -4695,6 +4695,13 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-shallow-compare@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-click-outside@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-click-outside/-/react-click-outside-3.0.1.tgz#6e77e84d2f17afaaac26dbad743cbbf909f5e24c"