diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 412dd6588a..d8698a1d2c 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -7,9 +7,7 @@
   // We need to set a block context to know we're inside a block, but also
   // to be able to reference the actual component ID of the block from
   // any depth
-  setContext("block", {
-    id: $component.id,
-  })
+  setContext("block", { id: $component.id })
 </script>
 
 <div use:styleable={$component.styles}>
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index e12c6eb86e..02456322da 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -14,22 +14,18 @@
   const block = getContext("block")
   const rand = generate()
 
-  $: id = block.id + rand
-  $: instance = createInstance(type, props, id)
-
   // Create a fake component instance so that we can use the core Component
   // to render this part of the block, taking advantage of binding enrichment
-  const createInstance = (type, props, id) => {
-    return {
-      _component: `@budibase/standard-components/${type}`,
-      _id: id,
-      _styles: {
-        normal: {
-          ...styles,
-        },
+  $: id = block.id + rand
+  $: instance = {
+    _component: `@budibase/standard-components/${type}`,
+    _id: id,
+    _styles: {
+      normal: {
+        ...styles,
       },
-      ...props,
-    }
+    },
+    ...props,
   }
 </script>