diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 212ab4c6f8..c05ae4c624 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -11,6 +11,7 @@
 
   $: editing = app.sessions?.length
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
+  $: unclickable = !isBuilder && !app.deployed
 
   const handleDefaultClick = () => {
     if (!isBuilder) {
@@ -31,11 +32,17 @@
   }
 
   const goToApp = () => {
-    window.open(`/app/${app.name}`, "_blank")
+    if (app.deployed && app.url) {
+      window.open(`/app${app.url}`, "_blank")
+    }
   }
 </script>
 
-<div class="app-row" on:click={lockedAction || handleDefaultClick}>
+<div
+  class="app-row"
+  on:click={lockedAction || handleDefaultClick}
+  class:unclickable
+>
   <div class="title">
     <div class="app-icon">
       <Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
@@ -74,7 +81,7 @@
         Edit
       </Button>
     </div>
-  {:else}
+  {:else if app.deployed}
     <!-- this can happen if an app builder has app user access to an app -->
     <div class="app-row-actions">
       <Button size="S" secondary>View</Button>
@@ -94,7 +101,7 @@
     transition: border 130ms ease-out;
     border: 1px solid transparent;
   }
-  .app-row:hover {
+  .app-row:not(.unclickable):hover {
     cursor: pointer;
     border-color: var(--spectrum-global-color-gray-300);
   }
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6694022b98..6d6af91dcc 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -113,6 +113,9 @@
   // List of context keys which we use inside bindings
   let knownContextKeyMap = {}
 
+  // Cleanup function to stop observing context changes when unmounting
+  let unobserve
+
   // Set up initial state for each new component instance
   $: initialise(instance)
 
@@ -311,6 +314,11 @@
 
     // Force an initial enrichment of the new settings
     enrichComponentSettings(get(context), settingsDefinitionMap)
+
+    // Start observing changes in context now that we are initialised
+    if (!unobserve) {
+      unobserve = context.actions.observeChanges(handleContextChange)
+    }
   }
 
   // Extracts a map of all context keys which are required by action settings
@@ -567,8 +575,8 @@
     }
   }
 
-  // Register an unregister component instance
   onMount(() => {
+    // Register this component instance for external access
     if ($appStore.isDevApp) {
       if (!componentStore.actions.isComponentRegistered(id)) {
         componentStore.actions.registerInstance(id, {
@@ -581,16 +589,17 @@
           state: store,
         })
       }
-      return () => {
-        if (componentStore.actions.isComponentRegistered(id)) {
-          componentStore.actions.unregisterInstance(id)
-        }
+    }
+    return () => {
+      // Unregister component
+      if (componentStore.actions.isComponentRegistered(id)) {
+        componentStore.actions.unregisterInstance(id)
       }
+
+      // Stop observing context changes
+      unobserve?.()
     }
   })
-
-  // Observe changes to context
-  onMount(() => context.actions.observeChanges(handleContextChange))
 </script>
 
 {#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}