From 2d1b0796f5de92b32bf734a01cf09b13c12433e0 Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Wed, 16 Nov 2022 18:22:56 +0100
Subject: [PATCH] fix(VncConsole): prevent running initialization code more
 than once (#8373)

The functions that were on the dependency list of the useEffect hook
got redefined each time the component got updated, resulting
in the component's initialization code, from within the useEffect hook,
to be running more than once.
That was unwanted behavior and the useCallback wrappers should prevent
it.
---
 .../src/components/VncConsole/VncConsole.tsx  | 66 +++++++++++--------
 1 file changed, 40 insertions(+), 26 deletions(-)

diff --git a/packages/react-console/src/components/VncConsole/VncConsole.tsx b/packages/react-console/src/components/VncConsole/VncConsole.tsx
index c8ac73999e2..460597eaf2a 100644
--- a/packages/react-console/src/components/VncConsole/VncConsole.tsx
+++ b/packages/react-console/src/components/VncConsole/VncConsole.tsx
@@ -97,23 +97,43 @@ export const VncConsole: React.FunctionComponent<VncConsoleProps> = ({
 
   const [status, setStatus] = React.useState(CONNECTING);
 
-  const addEventListeners = () => {
+  const onConnected = () => {
+    setStatus(CONNECTED);
+  };
+
+  const _onDisconnected = React.useCallback((e: any) => {
+    setStatus(DISCONNECTED);
+    onDisconnected(e);
+  }, []);
+
+  const _onSecurityFailure = React.useCallback((e: any) => {
+    setStatus(DISCONNECTED);
+    onSecurityFailure(e);
+  }, []);
+
+  const onCtrlAltDel = () => {
+    if (rfb.current) {
+      rfb?.current?.sendCtrlAltDel();
+    }
+  };
+
+  const addEventListeners = React.useCallback(() => {
     if (rfb.current) {
       rfb.current?.addEventListener('connect', onConnected);
       rfb.current?.addEventListener('disconnect', _onDisconnected);
       rfb.current?.addEventListener('securityfailure', _onSecurityFailure);
     }
-  };
+  }, [rfb, _onDisconnected, _onSecurityFailure]);
 
-  const removeEventListeners = () => {
+  const removeEventListeners = React.useCallback(() => {
     if (rfb.current) {
       rfb.current.removeEventListener('connect', onConnected);
       rfb.current.removeEventListener('disconnect', _onDisconnected);
       rfb.current.removeEventListener('securityfailure', _onSecurityFailure);
     }
-  };
+  }, [rfb, _onDisconnected, _onSecurityFailure]);
 
-  const connect = () => {
+  const connect = React.useCallback(() => {
     const protocol = encrypt ? 'wss' : 'ws';
     const url = `${protocol}://${host}:${port}/${path}`;
 
@@ -127,7 +147,21 @@ export const VncConsole: React.FunctionComponent<VncConsoleProps> = ({
     rfb.current.viewOnly = viewOnly;
     rfb.current.scaleViewport = scaleViewport;
     rfb.current.resizeSession = resizeSession;
-  };
+  }, [
+    addEventListeners,
+    host,
+    path,
+    port,
+    resizeSession,
+    scaleViewport,
+    viewOnly,
+    encrypt,
+    rfb,
+    repeaterID,
+    shared,
+    credentials,
+    novncElem
+  ]);
 
   React.useEffect(() => {
     initLogging(vncLogging);
@@ -152,26 +186,6 @@ export const VncConsole: React.FunctionComponent<VncConsoleProps> = ({
     rfb.current.disconnect();
   };
 
-  const onConnected = () => {
-    setStatus(CONNECTED);
-  };
-
-  const _onDisconnected = (e: any) => {
-    setStatus(DISCONNECTED);
-    onDisconnected(e);
-  };
-
-  const _onSecurityFailure = (e: any) => {
-    setStatus(DISCONNECTED);
-    onSecurityFailure(e);
-  };
-
-  const onCtrlAltDel = () => {
-    if (rfb.current) {
-      rfb?.current?.sendCtrlAltDel();
-    }
-  };
-
   let rightContent;
   let emptyState;
   switch (status) {