Optimize Query Reactors (#7908)

* Optimize Query Reactors

A lot of low hanging fruit for React.memo() here. Significantly faster reactor updates, engine-wide.

* fix bug with

* fix bug with DropShadowReactor

* destructure react impots

---------

Co-authored-by: HexaField <joshfield999@gmail.com>

Author: speigg

packages/client-core/src/user/components/Panel3D/useRender3DPanelSystem.tsx

@@ -92,7 +92,7 @@ export function useRender3DPanelSystem(panel: React.MutableRefObject<HTMLDivElem
 
     return () => {
       disableSystem(AvatarSelectRenderSystem)
-      SystemDefinitions.delete(AvatarSelectRenderSystem)
+      // todo - do we need to remove the system defintion?
       removeEntity(state.entity.value)
       window.removeEventListener('resize', resize)
     }

packages/engine/src/ecs/functions/SystemFunctions.tsx

@@ -1,11 +1,14 @@
-import React, { Suspense, useEffect } from 'react'
+/** Functions to provide system level functionalities. */
+
+import React, { Component, ErrorInfo, FC, memo, Suspense, useEffect, useMemo } from 'react'
 
 import { OpaqueType } from '@etherealengine/common/src/interfaces/OpaqueType'
 import multiLogger from '@etherealengine/common/src/logger'
 import { ReactorProps, ReactorRoot, startReactor } from '@etherealengine/hyperflux'
 
 import { nowMilliseconds } from '../../common/functions/nowMilliseconds'
 import { Engine } from '../classes/Engine'
+import { Entity } from '../classes/Entity'
 import { QueryComponents, useQuery } from './ComponentFunctions'
 import { EntityReactorProps } from './EntityFunctions'
 
@@ -15,7 +18,7 @@ export type SystemUUID = OpaqueType<'SystemUUID'> & string
 export interface System {
   uuid: SystemUUID
   execute: () => void // runs after preSystems, and before subSystems
-  reactor: React.FC<ReactorProps>
+  reactor: FC<ReactorProps>
   preSystems: SystemUUID[]
   subSystems: SystemUUID[]
   postSystems: SystemUUID[]
@@ -282,37 +285,46 @@ export const disableSystem = (systemUUID: SystemUUID) => {
   }
 }
 
-function QueryReactor(props: {
-  root: ReactorRoot
-  query: QueryComponents
-  ChildEntityReactor: React.FC<EntityReactorProps>
-}) {
-  const entities = useQuery(props.query)
-  return (
-    <>
-      {entities.map((entity) => (
-        <QueryReactorErrorBoundary key={entity}>
+const QueryReactor = memo(
+  (props: { root: ReactorRoot; entity: Entity; ChildEntityReactor: FC<EntityReactorProps> }) => {
+    const entityRoot = useMemo(() => {
+      return {
+        ...props.root,
+        entity: props.entity
+      }
+    }, [props.root, props.entity])
+    return (
+      <>
+        <QueryReactorErrorBoundary>
           <Suspense fallback={null}>
-            <props.ChildEntityReactor root={{ ...props.root, entity }} />
+            <props.ChildEntityReactor root={entityRoot} />
           </Suspense>
         </QueryReactorErrorBoundary>
-      ))}
-    </>
-  )
-}
+      </>
+    )
+  }
+)
 
-export const createQueryReactor = (Components: QueryComponents, ChildEntityReactor: React.FC<EntityReactorProps>) => {
+export const createQueryReactor = (Components: QueryComponents, ChildEntityReactor: FC<EntityReactorProps>) => {
   if (!ChildEntityReactor.name) Object.defineProperty(ChildEntityReactor, 'name', { value: 'ChildEntityReactor' })
+  const MemoChildEntityReactor = memo(ChildEntityReactor)
   return function HyperfluxQueryReactor({ root }: ReactorProps) {
-    return <QueryReactor query={Components} ChildEntityReactor={ChildEntityReactor} root={root} />
+    const entities = useQuery(Components)
+    return (
+      <>
+        {entities.map((entity) => (
+          <QueryReactor root={root} key={entity} entity={entity} ChildEntityReactor={MemoChildEntityReactor} />
+        ))}
+      </>
+    )
   }
 }
 
 interface ErrorState {
   error: Error | null
 }
 
-class QueryReactorErrorBoundary extends React.Component<any, ErrorState> {
+class QueryReactorErrorBoundary extends Component<any, ErrorState> {
   public state: ErrorState = {
     error: null
   }
@@ -322,7 +334,7 @@ class QueryReactorErrorBoundary extends React.Component<any, ErrorState> {
     return { error }
   }
 
-  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     console.error('Uncaught error:', error, errorInfo)
   }
 

packages/engine/src/scene/components/GroupComponent.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC, memo } from 'react'
 import { Camera, Material, Mesh, Object3D } from 'three'
 
 import { none } from '@etherealengine/hyperflux'
@@ -99,18 +99,17 @@ export type GroupReactorProps = {
   obj: Object3DWithEntity
 }
 
-export const createGroupQueryReactor = (
-  GroupChildReactor: React.FC<GroupReactorProps>,
-  Components: QueryComponents = []
-) =>
-  createQueryReactor([GroupComponent, ...Components], function GroupQueryReactor(props) {
+export const createGroupQueryReactor = (GroupChildReactor: FC<GroupReactorProps>, Components: QueryComponents = []) => {
+  const MemoGroupChildReactor = memo(GroupChildReactor)
+  return createQueryReactor([GroupComponent, ...Components], function GroupQueryReactor(props) {
     const entity = props.root.entity
     const groupComponent = useComponent(entity, GroupComponent)
     return (
       <>
         {groupComponent.value.map((obj, i) => (
-          <GroupChildReactor key={obj.uuid} entity={entity} obj={obj} />
+          <MemoGroupChildReactor key={obj.uuid} entity={entity} obj={obj} />
         ))}
       </>
     )
   })
+}

packages/engine/src/scene/systems/ShadowSystem.tsx

@@ -181,7 +181,6 @@ const DropShadowReactor = createQueryReactor([ShadowComponent], function DropSha
   const shadowMaterial = useHookstate(shadowState)
   const groupComponent = useOptionalComponent(entity, GroupComponent)
   const shadow = useComponent(entity, ShadowComponent)
-  const hasDropShadow = useOptionalComponent(entity, DropShadowComponent)
 
   useEffect(() => {
     if (
@@ -191,7 +190,7 @@ const DropShadowReactor = createQueryReactor([ShadowComponent], function DropSha
       useShadows ||
       !groupComponent ||
       groupComponent.value.length === 0 ||
-      hasDropShadow?.value
+      hasComponent(entity, DropShadowComponent)
     )
       return
 

packages/engine/src/xr/XRScenePlacementShaderSystem.tsx

@@ -63,17 +63,12 @@ const ScenePlacementReactor = createGroupQueryReactor(
       const useShader = xrState.sessionActive.value && xrState.scenePlacementMode.value === 'placing'
       if (useShader) {
         obj.traverse(addShaderToObject)
-      } else {
-        obj.traverse(removeShaderFromObject)
+        return () => {
+          obj.traverse(removeShaderFromObject)
+        }
       }
     }, [scenePlacementMode, sessionActive])
 
-    useEffect(() => {
-      return () => {
-        obj.traverse(removeShaderFromObject)
-      }
-    }, [])
-
     return null
   },
   [VisibleComponent]