From 36cf48bc5d73afd5758c4af320204dc5225a2766 Mon Sep 17 00:00:00 2001
From: Timmy Luong <TCL735@users.noreply.github.com>
Date: Wed, 1 Sep 2021 12:11:32 -0700
Subject: [PATCH] chore: add eslint rule for React hooks (#666)

---
 .eslintrc.json                                | 51 ++++++++++---------
 package.json                                  |  1 +
 .../Popover/Documentation/Popover.stories.tsx | 10 ++--
 yarn.lock                                     |  5 ++
 4 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index dec6a734..c9d9fac5 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -14,11 +14,12 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "prettier/react",
-    "prettier/@typescript-eslint"
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended",
+    "prettier/@typescript-eslint",
+    "prettier/react"
   ],
   "settings": {
     "react": {
@@ -26,36 +27,36 @@
     }
   },
   "rules": {
-    "curly": ["error", "all"],
-    "no-console": ["error", {"allow": ["warn", "error"]}],
-    "no-empty": "off",
-    "getter-return": "off",
-    "no-extra-boolean-cast": "off",
-    "no-case-declarations": "off",
-    "no-useless-escape": "off",
-    "no-undef": "off",
-    "no-fallthrough": "off",
-    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-namespace": "off",
-    "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/explicit-member-accessibility": "off",
-    "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/no-object-literal-type-assertion": "off",
-    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-inferrable-types": "off",
-    "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/prefer-interface": "off",
-    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-object-literal-type-assertion": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       {"varsIgnorePattern": "^_", "argsIgnorePattern": "^_"}
     ],
-    "react/jsx-no-target-blank": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/prefer-interface": "off",
+    "curly": ["error", "all"],
+    "getter-return": "off",
+    "no-case-declarations": "off",
+    "no-console": ["error", {"allow": ["warn", "error"]}],
+    "no-empty": "off",
+    "no-extra-boolean-cast": "off",
+    "no-fallthrough": "off",
+    "no-undef": "off",
+    "no-useless-escape": "off",
     "react/display-name": "off",
-    "react/no-unescaped-entities": "off",
-    "react/prop-types": "off",
+    "react/jsx-no-target-blank": "off",
+    "react/jsx-uses-react": "error",
     "react/no-find-dom-node": "off",
-    "react/jsx-uses-react": "error"
+    "react/no-unescaped-entities": "off",
+    "react/prop-types": "off"
   }
 }
diff --git a/package.json b/package.json
index 435707d6..aa9418fb 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "eslint-config-prettier": "^6.5.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^3.0.1",
     "html-loader": "^0.5.5",
     "husky": "^4.2.5",
diff --git a/src/Components/Popover/Documentation/Popover.stories.tsx b/src/Components/Popover/Documentation/Popover.stories.tsx
index c50611be..3b449474 100644
--- a/src/Components/Popover/Documentation/Popover.stories.tsx
+++ b/src/Components/Popover/Documentation/Popover.stories.tsx
@@ -516,16 +516,20 @@ testPopoverStories.add('Popover + Autofocus Child', () => {
 
 testPopoverStories.add('200 Popovers + Filtering', () => {
   const [searchTerm, updateSearchTerm] = useState<string>('')
-  const popovers = []
+  const words = []
   const dictionary = getDictionary()
 
   for (let i = 0; i < 200; i++) {
-    popovers.push({
-      triggerRef: useRef<ButtonRef>(null),
+    words.push({
       name: dictionary[i],
     })
   }
 
+  const popovers = words.map(word => ({
+    name: word.name,
+    triggerRef: useRef<ButtonRef>(null),
+  }))
+
   const handleInputChange = (e: ChangeEvent<InputRef>): void => {
     updateSearchTerm(e.target.value)
   }
diff --git a/yarn.lock b/yarn.lock
index d21b3763..9a8fe178 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7203,6 +7203,11 @@ eslint-plugin-prettier@^3.1.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
+  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
+
 eslint-plugin-react@^7.19.0:
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"