Re-enabled React hooks ESLint plugin (#172)

* Re-enabled React hooks ESLint plugin * Fixed lint error
jwngr · Sep 25, 2024 · f4e9e28 · f4e9e28
1 parent 1eae7b1
commit f4e9e28
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 27 deletions.
diff --git a/website/.eslintrc b/website/.eslintrc
diff --git 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
diff --git 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
@@ -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>