From f1db8ac9b23bc12f632d8a83fa8c3c9d79f558f5 Mon Sep 17 00:00:00 2001
From: Michael Estes <michael@etherealengine.com>
Date: Thu, 15 Aug 2024 13:56:39 -0700
Subject: [PATCH] SourceComponent

---
 packages/ecs/src/ComponentFunctions.ts        |  4 +--
 .../src/scene/components/SourceComponent.ts   | 28 +++++++++++++------
 packages/spatial/src/xr/XRComponents.ts       |  4 +++
 .../src/xrui/components/XRUIComponent.ts      |  2 ++
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/ecs/src/ComponentFunctions.ts b/packages/ecs/src/ComponentFunctions.ts
index e3c9f000a2..a6e22078dc 100755
--- a/packages/ecs/src/ComponentFunctions.ts
+++ b/packages/ecs/src/ComponentFunctions.ts
@@ -132,7 +132,7 @@ export interface ComponentPartial<
    * `@todo` Explain what reactive is in this context
    * `@todo` Explain this function
    */
-  reactor?: any // previously <React.FC> breaks types
+  reactor?: React.FC<any>
   /**
    * @todo Explain ComponentPartial.errors[]
    */
@@ -161,7 +161,7 @@ export interface Component<
   toJSON: (entity: Entity, component: State<ComponentType>) => JSON
   onSet: (entity: Entity, component: State<ComponentType>, json?: SetJSON) => void
   onRemove: (entity: Entity, component: State<ComponentType>) => void
-  reactor?: any
+  reactor?: React.FC<any>
   reactorMap: Map<Entity, ReactorRoot>
   stateMap: Record<Entity, State<ComponentType> | undefined>
   errors: ErrorTypes[]
diff --git a/packages/engine/src/scene/components/SourceComponent.ts b/packages/engine/src/scene/components/SourceComponent.ts
index 1046ae22fb..6c25dc4f77 100644
--- a/packages/engine/src/scene/components/SourceComponent.ts
+++ b/packages/engine/src/scene/components/SourceComponent.ts
@@ -23,9 +23,11 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { defineComponent } from '@etherealengine/ecs/src/ComponentFunctions'
+import { useEntityContext } from '@etherealengine/ecs'
+import { defineComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { Entity } from '@etherealengine/ecs/src/Entity'
 import { hookstate, none } from '@etherealengine/hyperflux'
+import { useLayoutEffect } from 'react'
 
 const entitiesBySource = {} as Record<string, Entity[]>
 
@@ -49,15 +51,23 @@ export const SourceComponent = defineComponent({
     }
   },
 
-  onRemove: (entity, component) => {
-    const src = component.value
+  reactor: () => {
+    const entity = useEntityContext()
+    const sourceComponent = useComponent(entity, SourceComponent)
 
-    const entities = SourceComponent.entitiesBySource[src].filter((currentEntity) => currentEntity !== entity)
-    if (entities.length === 0) {
-      SourceComponent.entitiesBySourceState[src].set(none)
-    } else {
-      SourceComponent.entitiesBySourceState[src].set(entities)
-    }
+    useLayoutEffect(() => {
+      const source = sourceComponent.value
+      return () => {
+        const entities = SourceComponent.entitiesBySource[source].filter((currentEntity) => currentEntity !== entity)
+        if (entities.length === 0) {
+          SourceComponent.entitiesBySourceState[source].set(none)
+        } else {
+          SourceComponent.entitiesBySourceState[source].set(entities)
+        }
+      }
+    }, [])
+
+    return null
   },
 
   entitiesBySourceState: hookstate(entitiesBySource),
diff --git a/packages/spatial/src/xr/XRComponents.ts b/packages/spatial/src/xr/XRComponents.ts
index f0bd3e31bd..c74738c16f 100644
--- a/packages/spatial/src/xr/XRComponents.ts
+++ b/packages/spatial/src/xr/XRComponents.ts
@@ -303,6 +303,8 @@ export const XRAnchorComponent = defineComponent({
         anchor?.delete()
       }
     }, [xrAnchorComponent.anchor])
+
+    return null
   }
 })
 
@@ -340,5 +342,7 @@ export const XRSpaceComponent = defineComponent({
       setComponent(entity, EntityTreeComponent, { parentEntity })
       setComponent(entity, TransformComponent)
     }, [])
+
+    return null
   }
 })
diff --git a/packages/spatial/src/xrui/components/XRUIComponent.ts b/packages/spatial/src/xrui/components/XRUIComponent.ts
index f251f2bef2..7e9ebb523c 100644
--- a/packages/spatial/src/xrui/components/XRUIComponent.ts
+++ b/packages/spatial/src/xrui/components/XRUIComponent.ts
@@ -51,5 +51,7 @@ export const XRUIComponent = defineComponent({
         xrui.destroy()
       }
     }, [])
+
+    return null
   }
 })