packages/effect-fc/src/Component.ts

@@ -1,4 +1,4 @@
-import { Context, Effect, type Equivalence, ExecutionStrategy, Function, Pipeable, Runtime, Scope, String, Tracer, type Utils } from "effect"
+import { Context, Effect, type Equivalence, ExecutionStrategy, Function, Pipeable, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
 import * as React from "react"
 import * as Hook from "./Hook.js"
 import type { ExcludeKeys } from "./utils.js"
@@ -111,7 +111,9 @@ export const useFC: {
         self: Component<E, R, P>
     ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
 } = Effect.fn("useFC")(function* <E, R, P extends {}>(
-    self: Component<E, R, P>
+    self:
+        | Component<E, R, P> & Memoized<P>
+        | Component<E, R, P>
 ) {
     const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
     runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
@@ -129,7 +131,9 @@ export const useFC: {
                 Effect.provideService(self.body(props), Scope.Scope, scope)
             )
             f.displayName = self.displayName ?? "Anonymous"
-            return f
+            return Predicate.hasProperty(self, "memo")
+                ? React.memo(f, self.propsAreEqual)
+                : f
         }, [scope])
 
         return React.createElement(FC, props)

packages/example/src/todo/Todo.tsx

@@ -111,6 +111,3 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
         </Flex>
     )
 })
-
-const MemoizedTodo = Component.memo(Todo)
-const MemoizedTodo2 = Component.memo(MemoizedTodo)