diff --git a/shared/js/ui/modal/connect/Controller.ts b/shared/js/ui/modal/connect/Controller.ts
index 19509e2e..aafc49a4 100644
--- a/shared/js/ui/modal/connect/Controller.ts
+++ b/shared/js/ui/modal/connect/Controller.ts
@@ -22,6 +22,7 @@ import {spawnSettingsModal} from "tc-shared/ui/modal/ModalSettings";
 import * as ipRegex from "ip-regex";
 import {UiVariableProvider} from "tc-shared/ui/utils/Variable";
 import {createLocalUiVariables} from "tc-shared/ui/utils/LocalVariable";
+import {createIpcUiVariableProvider} from "tc-shared/ui/utils/IpcVariable";
 
 const kRegexDomain = /^(localhost|((([a-zA-Z0-9_-]{0,63}\.){0,253})?[a-zA-Z0-9_-]{0,63}\.[a-zA-Z]{2,64}))$/i;
 
@@ -344,7 +345,7 @@ export type ConnectModalOptions = {
 }
 
 export function spawnConnectModalNew(options: ConnectModalOptions) {
-    const [ variableProvider, variableConsumer ] = createLocalUiVariables<ConnectUiVariables>();
+    const variableProvider = createIpcUiVariableProvider();
     const controller = new ConnectController(variableProvider);
 
     if(typeof options.selectedAddress === "string") {
@@ -355,7 +356,7 @@ export function spawnConnectModalNew(options: ConnectModalOptions) {
         controller.setSelectedProfile(options.selectedProfile);
     }
 
-    const modal = spawnReactModal(ConnectModal, controller.uiEvents, variableConsumer, options.connectInANewTab || false);
+    const modal = spawnReactModal(ConnectModal, controller.uiEvents, variableProvider.generateConsumerDescription(), options.connectInANewTab || false);
     modal.show();
 
     modal.events.one("destroy", () => {
diff --git a/shared/js/ui/modal/connect/Renderer.tsx b/shared/js/ui/modal/connect/Renderer.tsx
index de732548..2083a711 100644
--- a/shared/js/ui/modal/connect/Renderer.tsx
+++ b/shared/js/ui/modal/connect/Renderer.tsx
@@ -17,6 +17,8 @@ import * as i18n from "../../../i18n/country";
 import {getIconManager} from "tc-shared/file/Icons";
 import {RemoteIconRenderer} from "tc-shared/ui/react-elements/Icon";
 import {UiVariableConsumer} from "tc-shared/ui/utils/Variable";
+import {createIpcUiVariableConsumer, IpcVariableDescriptor} from "tc-shared/ui/utils/IpcVariable";
+import {AbstractModal} from "tc-shared/ui/react-elements/ModalDefinitions";
 
 const EventContext = React.createContext<Registry<ConnectUiEvents>>(undefined);
 const VariablesContext = React.createContext<UiVariableConsumer<ConnectUiVariables>>(undefined);
@@ -31,7 +33,7 @@ const InputServerAddress = React.memo(() => {
 
     const variables = useContext(VariablesContext);
     const address = variables.useVariable("server_address");
-    const addressValid = variables.useReadOnly("server_address_valid", true) || address.localValue !== address.remoteValue;
+    const addressValid = variables.useReadOnly("server_address_valid", undefined, true) || address.localValue !== address.remoteValue;
 
     return (
         <ControlledFlatInputField
@@ -79,7 +81,7 @@ const InputNickname = () => {
     const variables = useContext(VariablesContext);
 
     const nickname = variables.useVariable("nickname");
-    const validState = variables.useReadOnly("nickname_valid", true) || nickname.localValue !== nickname.remoteValue;
+    const validState = variables.useReadOnly("nickname_valid", undefined, true) || nickname.localValue !== nickname.remoteValue;
 
     return (
         <ControlledFlatInputField
@@ -383,19 +385,25 @@ const HistoryContainer = () => {
     )
 }
 
-export class ConnectModal extends InternalModal {
+export class ConnectModal extends AbstractModal {
     private readonly events: Registry<ConnectUiEvents>;
     private readonly variables: UiVariableConsumer<ConnectUiVariables>;
     private readonly connectNewTabByDefault: boolean;
 
-    constructor(events: Registry<ConnectUiEvents>, variables: UiVariableConsumer<ConnectUiVariables>, connectNewTabByDefault: boolean) {
+    constructor(events: Registry<ConnectUiEvents>, variables: IpcVariableDescriptor<ConnectUiVariables>, connectNewTabByDefault: boolean) {
         super();
 
-        this.variables = variables;
+        this.variables = createIpcUiVariableConsumer(variables);
         this.events = events;
         this.connectNewTabByDefault = connectNewTabByDefault;
     }
 
+    protected onDestroy() {
+        super.onDestroy();
+
+        this.variables.destroy();
+    }
+
     renderBody(): React.ReactElement {
         return (
             <EventContext.Provider value={this.events}>
diff --git a/shared/js/ui/utils/Variable.ts b/shared/js/ui/utils/Variable.ts
index 6d679e44..b3fa3fa7 100644
--- a/shared/js/ui/utils/Variable.ts
+++ b/shared/js/ui/utils/Variable.ts
@@ -363,6 +363,8 @@ export abstract class UiVariableConsumer<Variables extends UiVariableMap> {
 
         useEffect(() => {
             /* Initial rendered */
+            cacheEntry.useCount++;
+
             let listener;
             cacheEntry.updateListener.push(listener = () => {
                 /* We can't just increment the old one by one since this update listener may fires twice before rendering */