From f4e9e283fc6d3aefe842aae0c3e0e9fc19b5601e Mon Sep 17 00:00:00 2001
From: Jacob Wenger <wenger.jacob@gmail.com>
Date: Wed, 25 Sep 2024 15:40:52 -0700
Subject: [PATCH] Re-enabled React hooks ESLint plugin (#172)

* Re-enabled React hooks ESLint plugin

* Fixed lint error
---
 website/.eslintrc                    | 23 -----------------------
 website/eslint.config.mjs            |  7 +++++--
 website/package-lock.json            | 14 ++++++++++++++
 website/package.json                 |  1 +
 website/src/components/PageInput.tsx |  4 ++--
 5 files changed, 22 insertions(+), 27 deletions(-)
 delete mode 100644 website/.eslintrc

diff --git a/website/.eslintrc b/website/.eslintrc
deleted file mode 100644
index 6bb3e0b..0000000
--- a/website/.eslintrc
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "browser": true,
-    "es2020": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended"
-  ],
-  "ignorePatterns": [
-    "dist",
-    ".eslintrc.cjs"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "react-refresh"
-  ],
-  "rules": {
-    "react-refresh/only-export-components": ["warn", {"allowConstantExport": true}]
-  }
-}
diff --git a/website/eslint.config.mjs b/website/eslint.config.mjs
index 2578b68..7a127d2 100644
--- a/website/eslint.config.mjs
+++ b/website/eslint.config.mjs
@@ -1,6 +1,5 @@
 import eslint from '@eslint/js';
-// TODO: Add back `eslint-plugin-react-hooks once it supports the ESLint flat file format.
-// import reactHooks from 'eslint-plugin-react-hooks';
+import reactHooks from 'eslint-plugin-react-hooks';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
@@ -21,9 +20,13 @@ export default tseslint.config(
       sourceType: 'module',
       globals: globals.browser,
     },
+    plugins: {
+      'react-hooks': reactHooks,
+    },
     rules: {
       'no-console': 'error',
       '@typescript-eslint/no-extraneous-class': 'off',
+      ...reactHooks.configs.recommended.rules,
     },
   }
 );
diff --git a/website/package-lock.json b/website/package-lock.json
index b0928a6..4827dff 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -37,6 +37,7 @@
         "@types/react-router-dom": "^5.3.3",
         "@vitejs/plugin-react": "^4.3.1",
         "eslint": "^9.9.0",
+        "eslint-plugin-react-hooks": "^5.1.0-rc-f9ebd85a-20240925",
         "globals": "^15.9.0",
         "prettier": "^3.3.3",
         "source-map-explorer": "^2.1.0",
@@ -2941,6 +2942,19 @@
         }
       }
     },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.1.0-rc-f9ebd85a-20240925",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0-rc-f9ebd85a-20240925.tgz",
+      "integrity": "sha512-poLblSkeeqf7NO/S8UceBVVpYq49ifmN8V4rW5BNz8KkQyEeFoF7KjhIYCdZHfew6C7nzBJIPN6U6W2h47CDxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.2.tgz",
diff --git a/website/package.json b/website/package.json
index 2b38829..8ac85b3 100644
--- a/website/package.json
+++ b/website/package.json
@@ -33,6 +33,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc-f9ebd85a-20240925",
     "globals": "^15.9.0",
     "prettier": "^3.3.3",
     "source-map-explorer": "^2.1.0",
diff --git a/website/src/components/PageInput.tsx b/website/src/components/PageInput.tsx
index 91e068b..5b93501 100644
--- a/website/src/components/PageInput.tsx
+++ b/website/src/components/PageInput.tsx
@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce';
 import filter from 'lodash/filter';
 import forEach from 'lodash/forEach';
 import get from 'lodash/get';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import Autosuggest from 'react-autosuggest';
 import styled from 'styled-components';
 
@@ -172,7 +172,7 @@ export const PageInput: React.FC<{
     }
   }, []);
 
-  const debouncedLoadSuggestions = useCallback(debounce(loadSuggestions, 300), [loadSuggestions]);
+  const debouncedLoadSuggestions = useMemo(() => debounce(loadSuggestions, 300), [loadSuggestions]);
 
   return (
     <AutosuggestWrapper>