Example refactoring

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

@@ -3,7 +3,7 @@ import { Flex, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Effect } from "effect"
-import { Component, Hook } from "effect-fc"
+import { Component, Hook, Memoized, Suspense } from "effect-fc"
 import * as React from "react"
 
 
@@ -50,7 +50,7 @@ const RouteComponent = Component.make(function* AsyncRendering() {
 // )
 
 
-const AsyncComponent = Component.make(function* AsyncComponent() {
+class AsyncComponent extends Component.make(function* AsyncComponent() {
     const VSubComponent = yield* Component.useFC(SubComponent)
     yield* Effect.sleep("500 millis")
 
@@ -61,14 +61,15 @@ const AsyncComponent = Component.make(function* AsyncComponent() {
         </Flex>
     )
 }).pipe(
-    Component.suspenseWithOptions({ defaultFallback: <p>Loading...</p> })
-)
-const MemoizedAsyncComponent = Component.memo(AsyncComponent)
+    Suspense.suspense,
+    Suspense.withOptions({ defaultFallback: <p>Loading...</p> }),
+) {}
+class MemoizedAsyncComponent extends Memoized.memo(AsyncComponent) {}
 
-const SubComponent = Component.make(function* SubComponent() {
+class SubComponent extends Component.make(function* SubComponent() {
     const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
     return <Text>{state}</Text>
-})
+}) {}
 
 export const Route = createFileRoute("/dev/async-rendering")({
     component: RouteComponent