fix react hooks linting issues (#679)

.eslintrc.js

@@ -23,7 +23,8 @@ module.exports = {
     'import/no-unresolved': 'error',
     'no-duplicate-imports': 'error',
     'jsx-a11y/click-events-have-key-events': 'off',
-    'react-hooks/rules-of-hooks': 'error'
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/reactive-deps': 'error'
   },
   settings: {
     react: {

components/RandomImage.js

@@ -42,13 +42,13 @@ function RandomImage(props) {
     if (cacheIndex === 0 || cacheIndex > cache.length - 2) {
       updateCache()
     }
-  }, [cacheIndex])
+  }, [cacheIndex, cache.length, updateCache])
 
   React.useEffect(() => {
     if (imgs) {
       cache.push(...imgs)
     }
-  }, [imgs])
+  }, [cache, imgs])
 
   const loading = updating || selecting
 

components/TweetButton.js

@@ -4,10 +4,12 @@ import { useAsyncCallback } from '@dawnlabs/tacklebox'
 import Button from './Button'
 
 function useWindowListener(key, fn) {
+  const callback = React.useRef(fn)
+
   React.useEffect(() => {
-    window.addEventListener(key, fn)
+    window.addEventListener(key, callback.current)
-    return () => window.removeEventListener(key, fn)
+    return () => window.removeEventListener(key, callback.current)
-  }, [])
+  }, [key, callback])
 }
 
 function useOnlineListener() {
@@ -19,7 +21,7 @@ function useOnlineListener() {
         ? navigator.onLine
         : true
     )
-  }, [])
+  }, [setOnline])
 
   useWindowListener('offline', () => setOnline(false))
   useWindowListener('online', () => setOnline(true))

package.json

@@ -60,7 +60,7 @@
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.3",
-    "eslint-plugin-react-hooks": "^1.0.1",
+    "eslint-plugin-react-hooks": "^1.1.0-alpha.1",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.3",
     "now": "^14.0.0",

yarn.lock

@@ -2755,10 +2755,10 @@ eslint-plugin-jsx-a11y@^6.2.1:
     has "^1.0.3"
     jsx-ast-utils "^2.0.1"
 
-eslint-plugin-react-hooks@^1.0.1:
+eslint-plugin-react-hooks@^1.1.0-alpha.1:
-  version "1.0.1"
+  version "1.1.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.0.1.tgz#76b6fb4edafab02eab0090078977687157605dd9"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.1.0-alpha.1.tgz#4df0ee992cee25b6b256beb529aa58478e5dc869"
-  integrity sha512-yNhvY7EFBp0mq0Bt8BHoS57GwJ4e1qSYdvDFSfPnjmiSmyGUfQFQGcQs4K0JQFDGopWkURWq58psbUJIhWZ2Kg==
+  integrity sha512-mliA3yxdvED1124X883LEqZhry/c30syJ2hMMOHdiWvqgtPNgf8d7waMxUZx72iAHXwGkt/lGDaWkq5+d9Zn6A==
 
 eslint-plugin-react@^7.12.3:
   version "7.12.4"