diff --git a/web/src/hooks/NotificationsContext.ts b/web/src/hooks/NotificationsContext.ts
index 4a2d5ec5..0b87f186 100644
--- a/web/src/hooks/NotificationsContext.ts
+++ b/web/src/hooks/NotificationsContext.ts
@@ -1,4 +1,4 @@
-import { useCallback, createContext, useContext } from "react";
+import { createContext, useContext, useRef } from "react";
 
 import { Level } from "@components/ColoredSnackbarContent";
 import { Notification } from "@models/Notifications";
@@ -30,12 +30,10 @@ export function useNotifications() {
     };
 
     const resetNotification = () => useNotificationsProps.setNotification(null);
-    /* eslint-disable react-hooks/exhaustive-deps */
-    const createInfoNotification = useCallback(notificationBuilder("info"), []);
-    const createSuccessNotification = useCallback(notificationBuilder("success"), []);
-    const createWarnNotification = useCallback(notificationBuilder("warning"), []);
-    const createErrorNotification = useCallback(notificationBuilder("error"), []);
-    /* eslint-enable react-hooks/exhaustive-deps */
+    const createInfoNotification = useRef(notificationBuilder("info")).current;
+    const createSuccessNotification = useRef(notificationBuilder("success")).current;
+    const createWarnNotification = useRef(notificationBuilder("warning")).current;
+    const createErrorNotification = useRef(notificationBuilder("error")).current;
     const isActive = useNotificationsProps.notification !== null;
 
     return {
diff --git a/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx b/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx
index 30a7ef56..85654198 100644
--- a/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useRedirectionURL } from "@hooks/RedirectionURL";
 import { completeTOTPSignIn } from "@services/OneTimePassword";
@@ -32,10 +32,8 @@ const OneTimePasswordMethod = function (props: Props) {
     const redirectionURL = useRedirectionURL();
 
     const { onSignInSuccess, onSignInError } = props;
-    /* eslint-disable react-hooks/exhaustive-deps */
-    const onSignInErrorCallback = useCallback(onSignInError, []);
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
-    /* eslint-enable react-hooks/exhaustive-deps */
+    const onSignInErrorCallback = useRef(onSignInError).current;
+    const onSignInSuccessCallback = useRef(onSignInSuccess).current;
 
     const signInFunc = useCallback(async () => {
         if (!props.registered || props.authenticationLevel === AuthenticationLevel.TwoFactor) {
@@ -60,9 +58,9 @@ const OneTimePasswordMethod = function (props: Props) {
         }
         setPasscode("");
     }, [
-        passcode,
         onSignInErrorCallback,
         onSignInSuccessCallback,
+        passcode,
         redirectionURL,
         props.authenticationLevel,
         props.registered,
diff --git a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx
index e4a789e2..75382c55 100644
--- a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, ReactNode } from "react";
+import React, { useCallback, useEffect, useRef, useState, ReactNode } from "react";
 
 import { Button, makeStyles } from "@material-ui/core";
 
@@ -32,10 +32,8 @@ const PushNotificationMethod = function (props: Props) {
     const mounted = useIsMountedRef();
 
     const { onSignInSuccess, onSignInError } = props;
-    /* eslint-disable react-hooks/exhaustive-deps */
-    const onSignInErrorCallback = useCallback(onSignInError, []);
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
-    /* eslint-enable react-hooks/exhaustive-deps */
+    const onSignInErrorCallback = useRef(onSignInError).current;
+    const onSignInSuccessCallback = useRef(onSignInSuccess).current;
 
     const signInFunc = useCallback(async () => {
         if (props.authenticationLevel === AuthenticationLevel.TwoFactor) {
@@ -63,7 +61,7 @@ const PushNotificationMethod = function (props: Props) {
             onSignInErrorCallback(new Error("There was an issue completing sign in process"));
             setState(State.Failure);
         }
-    }, [onSignInErrorCallback, onSignInSuccessCallback, setState, redirectionURL, mounted, props.authenticationLevel]);
+    }, [onSignInErrorCallback, onSignInSuccessCallback, redirectionURL, mounted, props.authenticationLevel]);
 
     useEffect(() => {
         signInFunc();
@@ -113,7 +111,7 @@ const PushNotificationMethod = function (props: Props) {
 
 export default PushNotificationMethod;
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
     icon: {
         width: "64px",
         height: "64px",
diff --git a/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx b/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx
index 9e622174..a504b50f 100644
--- a/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, Fragment } from "react";
+import React, { useCallback, useEffect, useRef, useState, Fragment } from "react";
 
 import { makeStyles, Button, useTheme } from "@material-ui/core";
 import { CSSProperties } from "@material-ui/styles";
@@ -40,10 +40,8 @@ const SecurityKeyMethod = function (props: Props) {
     const [timerPercent, triggerTimer] = useTimer(signInTimeout * 1000 - 500);
 
     const { onSignInSuccess, onSignInError } = props;
-    /* eslint-disable react-hooks/exhaustive-deps */
-    const onSignInErrorCallback = useCallback(onSignInError, []);
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
-    /* eslint-enable react-hooks/exhaustive-deps */
+    const onSignInErrorCallback = useRef(onSignInError).current;
+    const onSignInSuccessCallback = useRef(onSignInSuccess).current;
 
     const doInitiateSignIn = useCallback(async () => {
         // If user is already authenticated, we don't initiate sign in process.
@@ -82,8 +80,8 @@ const SecurityKeyMethod = function (props: Props) {
             setState(State.Failure);
         }
     }, [
-        onSignInSuccessCallback,
         onSignInErrorCallback,
+        onSignInSuccessCallback,
         redirectionURL,
         mounted,
         triggerTimer,
@@ -120,7 +118,7 @@ const SecurityKeyMethod = function (props: Props) {
 
 export default SecurityKeyMethod;
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
     icon: {
         display: "inline-block",
     },