Merge pull request #281 from MetroStar/eslint-plugin-react-hooks

Add ESLint Plugin React Hooks

eslint.config.js

@@ -3,6 +3,7 @@ import pluginJs from '@eslint/js';
 import tseslint from 'typescript-eslint';
 import prettierRecommended from 'eslint-plugin-prettier/recommended';
 import reactPlugin from 'eslint-plugin-react';
+import hooksPlugin from 'eslint-plugin-react-hooks';
 
 export default [
   {
@@ -54,8 +55,13 @@ export default [
     ignores: ['*.stories.tsx'],
   },
   {
+    plugins: {
+      'react-hooks': hooksPlugin,
+    },
     rules: {
       'react/react-in-jsx-scope': 'off',
+      ...hooksPlugin.configs.recommended.rules,
+      'react-hooks/exhaustive-deps': 'off',
     },
     ignores: ['*.test.tsx'],
   },

package.json

@@ -53,6 +53,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "5.0.0",
     "jest-axe": "^9.0.0",
     "postcss": "^8.4.47",
     "prettier": "3.3.3",

packages/comet-uswds/src/components/accordion/accordion.tsx

@@ -50,11 +50,6 @@ export const Accordion = ({
   items,
   children,
 }: AccordionProps): ReactElement => {
-  // If no children and items provided, render partial
-  if (!children && !items) {
-    return <></>;
-  }
-
   // Ensure accordion JS is loaded
   const accordionRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -77,6 +72,11 @@ export const Accordion = ({
     };
   });
 
+  // If no children and items provided, render partial
+  if (!children && !items) {
+    return <></>;
+  }
+
   return (
     <div
       id={id}

packages/comet-uswds/src/components/language-selector/language-selector.tsx

@@ -48,6 +48,22 @@ export const LanguageSelector = ({
     'usa-button--unstyled': variant === 'unstyled',
   });
 
+  // Ensure language selector JS is loaded
+  const languageSelectorRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const accordionElement = languageSelectorRef.current;
+    if (items.length >= 3) {
+      languageSelector.on(accordionElement);
+    }
+
+    // Ensure cleanup after the effect
+    return () => {
+      if (items.length >= 3) {
+        languageSelector.off(accordionElement);
+      }
+    };
+  }, []);
+
   // If there are less than 3 items, render as a button that toggles the options
   if (items.length < 3) {
     return (
@@ -74,18 +90,6 @@ export const LanguageSelector = ({
     );
   }
 
-  // Ensure language selector JS is loaded
-  const languageSelectorRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const accordionElement = languageSelectorRef.current;
-    languageSelector.on(accordionElement);
-
-    // Ensure cleanup after the effect
-    return () => {
-      languageSelector.off(accordionElement);
-    };
-  }, []);
-
   // If there are 3 or more items, render as an accordion
   return (
     <div id={id} className={languageSelectorClasses} ref={languageSelectorRef}>