SourceComponent

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[]

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),

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
   }
 })

packages/spatial/src/xrui/components/XRUIComponent.ts

@@ -51,5 +51,7 @@ export const XRUIComponent = defineComponent({
         xrui.destroy()
       }
     }, [])
+
+    return null
   }
 })