Work

packages/effect-fc/src/Component.ts

@@ -110,6 +110,8 @@ export interface Suspense {
     readonly suspense: true
 }
 
+export type SuspenseProps = Omit<React.SuspenseProps, "children">
+
 export const suspense = <T extends Component<any, any, any>>(
     self: ExcludeKeys<T, keyof Suspense>
 ): T & Suspense => Object.setPrototypeOf(
@@ -119,6 +121,9 @@ export const suspense = <T extends Component<any, any, any>>(
 
 
 export const useFC: {
+    <E, R, P extends {}>(
+        self: Component<E, R, ExcludeKeys<P, keyof SuspenseProps>> & Suspense
+    ): Effect.Effect<React.FC<P & SuspenseProps>, never, Exclude<R, Scope.Scope>>
     <E, R, P extends {}>(
         self: Component<E, R, P>
     ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>

packages/example/src/routes/dev/async-rendering.tsx

@@ -8,7 +8,7 @@ import * as React from "react"
 
 
 const RouteComponent = Component.make(function* AsyncRendering() {
-    const VAsyncComponent = yield* Component.useSuspenseFC(AsyncComponent)
+    const VAsyncComponent = yield* Component.useFC(AsyncComponent)
     const [input, setInput] = React.useState("")
 
     return <>
@@ -34,7 +34,9 @@ const AsyncComponent = Component.make(function* AsyncComponent() {
         <Text>Rendered!</Text><br />
         <VSubComponent />
     </>
-})
+}).pipe(
+    Component.suspense
+)
 
 const SubComponent = Component.make(function* SubComponent() {
     const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))