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 = ({ 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 = ({ 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 = ({ 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) {