diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index 8dfb8d18e..b0757034e 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/packages/web/src/datagrid/DataGridCore.svelte
@@ -177,6 +177,7 @@
   import axiosInstance from '../utility/axiosInstance';
   import { copyTextToClipboard } from '../utility/clipboard';
   import invalidateCommands from '../commands/invalidateCommands';
+  import createRef from '../utility/createRef';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -416,15 +417,15 @@
     domFocusField.focus();
   }
 
-  const lastPublishledRef = { current: '' };
+  const lastPublishledRef = createRef('');
   $: if (onSelectionChanged) {
     const published = getCellsPublished(selectedCells);
     const stringified = stableStringify(published);
-    if (lastPublishledRef.current != stringified) {
+    if (lastPublishledRef.get() != stringified) {
       // console.log('PUBLISH', published);
       // console.log('lastPublishledRef.current', lastPublishledRef.current);
       // console.log('stringified', stringified);
-      lastPublishledRef.current = stringified;
+      lastPublishledRef.set(stringified);
       onSelectionChanged(published);
     }
   }
diff --git a/packages/web/src/datagrid/InplaceEditor.svelte b/packages/web/src/datagrid/InplaceEditor.svelte
index 1a7340308..affbd23c9 100644
--- a/packages/web/src/datagrid/InplaceEditor.svelte
+++ b/packages/web/src/datagrid/InplaceEditor.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import keycodes from '../utility/keycodes';
   import { onMount } from 'svelte';
+  import createRef from '../utility/createRef';
 
   export let inplaceEditorState;
   export let dispatchInsplaceEditor;
@@ -12,29 +13,29 @@
 
   const widthCopy = width;
 
-  const isChangedRef = { current: !!inplaceEditorState.text };
+  const isChangedRef = createRef(!!inplaceEditorState.text);
 
   function handleKeyDown(event) {
     switch (event.keyCode) {
       case keycodes.escape:
-        isChangedRef.current = false;
+        isChangedRef.set(false);
         dispatchInsplaceEditor({ type: 'close' });
         break;
       case keycodes.enter:
-        if (isChangedRef.current) {
+        if (isChangedRef.get()) {
           // grider.setCellValue(rowIndex, uniqueName, editor.value);
           onSetValue(domEditor.value);
-          isChangedRef.current = false;
+          isChangedRef.set(false);
         }
         domEditor.blur();
         dispatchInsplaceEditor({ type: 'close', mode: 'enter' });
         break;
       case keycodes.s:
         if (event.ctrlKey) {
-          if (isChangedRef.current) {
+          if (isChangedRef.get()) {
             onSetValue(domEditor.value);
             // grider.setCellValue(rowIndex, uniqueName, editor.value);
-            isChangedRef.current = false;
+            isChangedRef.set(false);
           }
           event.preventDefault();
           dispatchInsplaceEditor({ type: 'close', mode: 'save' });
@@ -44,10 +45,10 @@
   }
 
   function handleBlur() {
-    if (isChangedRef.current) {
+    if (isChangedRef.get()) {
       onSetValue(domEditor.value);
       // grider.setCellValue(rowIndex, uniqueName, editor.value);
-      isChangedRef.current = false;
+      isChangedRef.set(false);
     }
     dispatchInsplaceEditor({ type: 'close' });
   }
@@ -63,7 +64,7 @@
 
 <input
   type="text"
-  on:change={() => (isChangedRef.current = true)}
+  on:change={() => isChangedRef.set(true)}
   on:keydown={handleKeyDown}
   on:blur={handleBlur}
   bind:this={domEditor}
diff --git a/packages/web/src/datagrid/LoadingDataGridCore.svelte b/packages/web/src/datagrid/LoadingDataGridCore.svelte
index 41d829fcb..ccebaa93f 100644
--- a/packages/web/src/datagrid/LoadingDataGridCore.svelte
+++ b/packages/web/src/datagrid/LoadingDataGridCore.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import createRef from '../utility/createRef';
+
   import DataGridCore from './DataGridCore.svelte';
 
   export let loadDataPage;
@@ -17,8 +19,8 @@
   let errorMessage = null;
   let domGrid;
 
-  const loadNextDataRef = { current: false };
-  const loadedTimeRef = { current: null };
+  const loadNextDataRef = createRef(false);
+  const loadedTimeRef = createRef(null);
 
   export function resetLoadedAll() {
     isLoadedAll = false;
@@ -32,17 +34,17 @@
 
   async function loadNextData() {
     if (isLoading) return;
-    loadNextDataRef.current = false;
+    loadNextDataRef.set(false);
     isLoading = true;
 
     const loadStart = new Date().getTime();
     // await new Promise(resolve => setTimeout(resolve, 5000));
 
-    loadedTimeRef.current = loadStart;
+    loadedTimeRef.set(loadStart);
     // console.log('LOAD NEXT ROWS', loadedRows);
 
     const nextRows = await loadDataPage($$props, loadedRows.length, 100);
-    if (loadedTimeRef.current !== loadStart) {
+    if (loadedTimeRef.get() !== loadStart) {
       // new load was dispatched
       return;
     }
@@ -68,7 +70,7 @@
       //   }));
     }
 
-    if (loadNextDataRef.current) {
+    if (loadNextDataRef.get()) {
       loadNextData();
     }
     // console.log('LOADED', nextRows, loadedRows);
@@ -93,7 +95,7 @@
     isLoadedAll = false;
     loadedTime = new Date().getTime();
     errorMessage = null;
-    loadNextDataRef.current = false;
+    loadNextDataRef.set(false);
     // loadNextDataToken = 0;
   }
 
diff --git a/packages/web/src/forms/FormProviderCore.svelte b/packages/web/src/forms/FormProviderCore.svelte
index dc5b07372..60a9339a1 100644
--- a/packages/web/src/forms/FormProviderCore.svelte
+++ b/packages/web/src/forms/FormProviderCore.svelte
@@ -10,6 +10,7 @@
 
 <script lang="ts">
   import FormFieldTemplateLarge from '../modals/FormFieldTemplateLarge.svelte';
+  import createRef from '../utility/createRef';
 
   import keycodes from '../utility/keycodes';
 
@@ -24,15 +25,15 @@
     values,
     template,
     setFieldValue,
-    submitActionRef: { current: null },
+    submitActionRef: createRef(null),
   };
 
   setContext(contextKey, context);
 
   function handleEnter(e) {
-    if (e.keyCode == keycodes.enter && context.submitActionRef.current) {
+    if (e.keyCode == keycodes.enter && context.submitActionRef.get()) {
       e.preventDefault();
-      context.submitActionRef.current(values);
+      context.submitActionRef.get()(values);
     }
   }
 </script>
diff --git a/packages/web/src/forms/FormSubmit.svelte b/packages/web/src/forms/FormSubmit.svelte
index c76003073..d7643970a 100644
--- a/packages/web/src/forms/FormSubmit.svelte
+++ b/packages/web/src/forms/FormSubmit.svelte
@@ -12,9 +12,9 @@
     dispatch('click', $values);
   }
 
-  submitActionRef.current = () => {
+  submitActionRef.set(() => {
     handleClick();
-  };
+  });
 </script>
 
 <FormStyledButton type="submit" on:click={handleClick} {...$$props} />
diff --git a/packages/web/src/modals/ConnectionModal.svelte b/packages/web/src/modals/ConnectionModal.svelte
index e1bff4deb..cc1fd9cf7 100644
--- a/packages/web/src/modals/ConnectionModal.svelte
+++ b/packages/web/src/modals/ConnectionModal.svelte
@@ -13,27 +13,28 @@
 
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal, closeModal } from './modalTools';
+  import createRef from '../utility/createRef';
 
   export let connection;
 
   let isTesting;
   let sqlConnectResult;
 
-  const testIdRef = { current: 0 };
+  const testIdRef = createRef(0);
 
   async function handleTest(e) {
     isTesting = true;
-    testIdRef.current += 1;
-    const testid = testIdRef.current;
+    testIdRef.update(x => x + 1);
+    const testid = testIdRef.get();
     const resp = await axiosInstance.post('connections/test', e.detail);
-    if (testIdRef.current != testid) return;
+    if (testIdRef.get() != testid) return;
 
     isTesting = false;
     sqlConnectResult = resp.data;
   }
 
   function handleCancelTest() {
-    testIdRef.current += 1; // invalidate current test
+    testIdRef.update(x => x + 1); // invalidate current test
     isTesting = false;
   }
 
diff --git a/packages/web/src/modals/ImportExportModal.svelte b/packages/web/src/modals/ImportExportModal.svelte
index 69e28b696..9a2a87537 100644
--- a/packages/web/src/modals/ImportExportModal.svelte
+++ b/packages/web/src/modals/ImportExportModal.svelte
@@ -15,6 +15,7 @@
   import SocketMessageView from '../query/SocketMessageView.svelte';
   import { currentArchive, extensions, selectedWidget } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
+  import createRef from '../utility/createRef';
   import openNewTab from '../utility/openNewTab';
   import socket from '../utility/socket';
   import useEffect from '../utility/useEffect';
@@ -33,7 +34,7 @@
   export let openedFile = undefined;
   export let importToArchive = false;
 
-  const refreshArchiveFolderRef = { current: null };
+  const refreshArchiveFolderRef = createRef(null);
 
   $: targetArchiveFolder = importToArchive ? `import-${moment().format('YYYY-MM-DD-hh-mm-ss')}` : $currentArchive;
 
@@ -54,10 +55,10 @@
 
   const handleRunnerDone = () => {
     busy = false;
-    if (refreshArchiveFolderRef.current) {
+    if (refreshArchiveFolderRef.get()) {
       axiosInstance.post('archive/refresh-folders', {});
-      axiosInstance.post('archive/refresh-files', { folder: refreshArchiveFolderRef.current });
-      $currentArchive = refreshArchiveFolderRef.current;
+      axiosInstance.post('archive/refresh-files', { folder: refreshArchiveFolderRef.get() });
+      $currentArchive = refreshArchiveFolderRef.get();
       $selectedWidget = 'archive';
     }
   };
@@ -87,9 +88,9 @@
     runnerId = runid;
 
     if (values.targetStorageType == 'archive') {
-      refreshArchiveFolderRef.current = values.targetArchiveFolder;
+      refreshArchiveFolderRef.set(values.targetArchiveFolder);
     } else {
-      refreshArchiveFolderRef.current = null;
+      refreshArchiveFolderRef.set(null);
     }
   };
 
diff --git a/packages/web/src/query/SocketMessageView.svelte b/packages/web/src/query/SocketMessageView.svelte
index b6a42715a..629011b71 100644
--- a/packages/web/src/query/SocketMessageView.svelte
+++ b/packages/web/src/query/SocketMessageView.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import _ from 'lodash';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import createRef from '../utility/createRef';
 
   import socket from '../utility/socket';
 
@@ -13,16 +14,16 @@
   export let eventName;
   export let executeNumber;
 
-  const cachedMessagesRef = { current: [] };
+  const cachedMessagesRef = createRef([]);
 
   let displayedMessages = [];
 
   const displayCachedMessages = _.throttle(() => {
-    displayedMessages = [...cachedMessagesRef.current];
+    displayedMessages = [...cachedMessagesRef.get()];
   }, 500);
 
   const handleInfo = info => {
-    cachedMessagesRef.current.push(info);
+    cachedMessagesRef.get().push(info);
     displayCachedMessages();
   };
 
@@ -39,7 +40,7 @@
   $: {
     if (executeNumber >= 0) {
       displayedMessages = [];
-      cachedMessagesRef.current = [];
+      cachedMessagesRef.set([]);
     }
   }
 
diff --git a/packages/web/src/utility/createRef.ts b/packages/web/src/utility/createRef.ts
new file mode 100644
index 000000000..bf1f29386
--- /dev/null
+++ b/packages/web/src/utility/createRef.ts
@@ -0,0 +1,26 @@
+interface Reference<T> {
+  set(value: T);
+  get(): T;
+  reset(): void;
+  update(func: (arg: T) => T);
+}
+
+export default function createRef<T>(value: T): Reference<T> {
+  return {
+    value,
+    initValue: value,
+    
+    set(value) {
+      this.value = value;
+    },
+    reset() {
+      this.value = this.initValue;
+    },
+    get() {
+      return this.value;
+    },
+    update(func) {
+      this.value = func(this.value);
+    },
+  } as Reference<T>;
+}