Memoize comopnents of deriver()

theatre/studio/src/utils/derive-utils.tsx

@@ -4,7 +4,6 @@ import {useDerivation} from '@theatre/react'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import React, {useMemo, useRef} from 'react'
 import {invariant} from './invariant'
-import {emptyArray} from '@theatre/shared/utils'
 
 type DeriveAll<T> = IDerivation<
   {
@@ -36,23 +35,6 @@ function deriveAllD<T extends Record<string, $<any>> | $<any>[]>(
   }) as $IntentionalAny
 }
 
-export function useReactPrism(
-  fn: () => React.ReactNode,
-  deps: readonly any[] = emptyArray,
-): React.ReactElement {
-  const derivation = useMemo(() => prism(fn), deps)
-  return <DeriveElement der={derivation} />
-}
-
-export function reactPrism(fn: () => React.ReactNode): React.ReactElement {
-  return <DeriveElement der={prism(fn)} />
-}
-
-function DeriveElement(props: {der: IDerivation<React.ReactNode>}) {
-  const node = useDerivation(props.der)
-  return <>{node}</>
-}
-
 /** This is only used for type checking to make sure the APIs are used properly */
 interface TSErrors<M> extends Error {}
 
@@ -76,7 +58,8 @@ type ReactDeriver<Props extends {}> = (
 export function deriver<Props extends {}>(
   Component: React.ComponentType<Props>,
 ): ReactDeriver<Props> {
-  return React.forwardRef(function deriverRender(
+  const finalComp = React.memo(
+    React.forwardRef(function deriverRender(
       props: Record<string, $IntentionalAny>,
       ref,
     ) {
@@ -112,5 +95,10 @@ export function deriver<Props extends {}>(
           ...observedPropState,
         } as Props)
       )
-  })
+    }),
+  )
+
+  finalComp.displayName = `deriver(${Component.displayName})`
+
+  return finalComp
 }