Added react-hooks lint rules

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/.eslintrc.js

@@ -39,6 +39,7 @@ module.exports = {
   plugins: [
     'filenames',
     'react',
+    'react-hooks',
     'simple-import-sort',
     'import'
   ],
@@ -308,7 +309,9 @@ module.exports = {
     'react/react-in-jsx-scope': 2,
     'react/self-closing-comp': 2,
     'react/sort-comp': 2,
-    'react/jsx-wrap-multilines': 2
+    'react/jsx-wrap-multilines': 2,
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error'
   },
   overrides: [
     {

frontend/src/App/ApplyTheme.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useCallback, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import themes from 'Styles/Themes';
@@ -19,7 +19,8 @@ function createMapStateToProps() {
 
 function ApplyTheme({ theme, children }) {
   // Update the CSS Variables
-  function updateCSSVariables() {
+
+  const updateCSSVariables = useCallback(() => {
     const arrayOfVariableKeys = Object.keys(themes[theme]);
     const arrayOfVariableValues = Object.values(themes[theme]);
 
@@ -31,12 +32,12 @@ function ApplyTheme({ theme, children }) {
         arrayOfVariableValues[index]
       );
     });
-  }
+  }, [theme]);
 
   // On Component Mount and Component Update
   useEffect(() => {
     updateCSSVariables(theme);
-  }, [theme]);
+  }, [updateCSSVariables, theme]);
 
   return <Fragment>{children}</Fragment>;
 }

frontend/src/Components/Modal/ConfirmModal.js

@@ -30,10 +30,10 @@ function ConfirmModal(props) {
   useEffect(() => {
     if (isOpen) {
       bindShortcut('enter', onConfirm);
-    } else {
-      unbindShortcut('enter', onConfirm);
+
+      return () => unbindShortcut('enter', onConfirm);
     }
-  }, [onConfirm]);
+  }, [bindShortcut, unbindShortcut, isOpen, onConfirm]);
 
   return (
     <Modal

frontend/src/Settings/PendingChangesModal.js

@@ -20,7 +20,7 @@ function PendingChangesModal(props) {
 
   useEffect(() => {
     bindShortcut('enter', onConfirm);
-  }, [onConfirm]);
+  }, [bindShortcut, onConfirm]);
 
   return (
     <Modal

package.json

@@ -105,6 +105,7 @@
     "eslint-plugin-filenames": "1.3.2",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-simple-import-sort": "8.0.0",
     "esprint": "3.6.0",
     "file-loader": "6.2.0",

yarn.lock

@@ -2762,6 +2762,11 @@ eslint-plugin-import@2.26.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
+eslint-plugin-react-hooks@4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
 eslint-plugin-react@7.31.11:
   version "7.31.11"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.11.tgz#011521d2b16dcf95795df688a4770b4eaab364c8"