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