From 270cb0f5cd8af6950ec27a592d8cbbbaea28e5ed Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Mon, 11 Mar 2019 13:27:15 -0700
Subject: [PATCH] optimize react hooks

---
 components/RandomImage.js | 15 +++++++++------
 components/TweetButton.js | 11 ++++++-----
 package.json              |  2 +-
 yarn.lock                 |  8 ++++----
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/components/RandomImage.js b/components/RandomImage.js
index b37d6fb..9af6919 100644
--- a/components/RandomImage.js
+++ b/components/RandomImage.js
@@ -6,12 +6,12 @@ import ApiContext from './ApiContext'
 import PhotoCredit from './PhotoCredit'
 
 function RandomImage(props) {
-  const { current: cache } = React.useRef([])
+  const cacheRef = React.useRef([])
   const [cacheIndex, updateIndex] = React.useState(0)
   const api = React.useContext(ApiContext)
 
   const [selectImage, { loading: selecting }] = useAsyncCallback(() => {
-    const image = cache[cacheIndex]
+    const image = cacheRef.current[cacheIndex]
 
     return api.unsplash.download(image.id).then(blob => props.onChange(blob, image))
   })
@@ -20,20 +20,23 @@ function RandomImage(props) {
     api.unsplash.random
   )
 
+  const needsFetch = !error && !updating && (!imgs || cacheIndex > cache.length - 2)
+
   React.useEffect(() => {
-    if (!error && !updating && (!imgs || cacheIndex > cache.length - 2)) {
+    if (needsFetch) {
       updateCache()
     }
-  }, [error, updating, imgs, cacheIndex, cache.length, updateCache])
+  }, [needsFetch, updateCache])
 
   React.useEffect(() => {
     if (imgs) {
-      cache.push(...imgs)
+      cacheRef.current.push(...imgs)
     }
-  }, [cache, imgs])
+  }, [imgs])
 
   const loading = updating || selecting
 
+  const cache = cacheRef.current
   const photographer = cache[cacheIndex] && cache[cacheIndex].photographer
   const bgImage = cache[cacheIndex] && cache[cacheIndex].dataURL
   return (
diff --git a/components/TweetButton.js b/components/TweetButton.js
index 8a12ca9..be880ad 100644
--- a/components/TweetButton.js
+++ b/components/TweetButton.js
@@ -5,12 +5,13 @@ import ApiContext from './ApiContext'
 import Button from './Button'
 
 function useWindowListener(key, fn) {
-  const { current: callback } = React.useRef(fn)
+  const callbackRef = React.useRef(fn)
 
   React.useEffect(() => {
-    window.addEventListener(key, callback)
-    return () => window.removeEventListener(key, callback)
-  }, [key, callback])
+    const cb = callbackRef.current
+    window.addEventListener(key, cb)
+    return () => window.removeEventListener(key, cb)
+  }, [key])
 }
 
 function useOnlineListener() {
@@ -22,7 +23,7 @@ function useOnlineListener() {
         ? navigator.onLine
         : true
     )
-  }, [setOnline])
+  }, [])
 
   useWindowListener('offline', () => setOnline(false))
   useWindowListener('online', () => setOnline(true))
diff --git a/package.json b/package.json
index 9bfe563..c62274c 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "now-build": "cross-env NODE_ENV=production yarn build && yarn export -o dist"
   },
   "dependencies": {
-    "@dawnlabs/tacklebox": "^0.0.4",
+    "@dawnlabs/tacklebox": "^0.0.5",
     "axios": "^0.18.0",
     "codemirror": "^5.42.2",
     "codemirror-graphql": "^0.8.3",
diff --git a/yarn.lock b/yarn.lock
index 11d3aab..ffd435f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -775,10 +775,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@dawnlabs/tacklebox@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@dawnlabs/tacklebox/-/tacklebox-0.0.4.tgz#ee84ab6eaf141e9fbd5d8cc03964fc5db9c01bd0"
-  integrity sha512-Wa5IBblxFHZ9OmUgw6bitnas4J9Ta0UMeBGePXuymxgIxXQKbpd7RmY8Syw8Fyhn6lXlXteL98fL21V64DgwQQ==
+"@dawnlabs/tacklebox@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@dawnlabs/tacklebox/-/tacklebox-0.0.5.tgz#e33b1983c576bb617c01d516b1f7419a6c5d299a"
+  integrity sha512-DFyQ7FbEVwzOkg/sNSey7J98s/XXBbT0U9AGrCVuQpbC8VrrLCzgKlbeexJfVFvTm5B1tFTmzne3vpAmBezY0A==
   dependencies:
     copy-to-clipboard "^3.0.8"
     react-click-outside "^3.0.1"