Example cleanup

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

@@ -9,7 +9,7 @@ import * as React from "react"
 
 
 // Generator version
-const RouteComponent = Component.make(function* AsyncRendering() {
+const RouteComponent = Component.make(Effect.fnUntraced(function* AsyncRendering() {
     const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
     const AsyncComponentFC = yield* AsyncComponent
     const [input, setInput] = React.useState("")
@@ -25,7 +25,7 @@ const RouteComponent = Component.make(function* AsyncRendering() {
             <AsyncComponentFC />
         </Flex>
     )
-}).pipe(
+})).pipe(
     Component.withRuntime(runtime.context)
 )
 
@@ -51,7 +51,7 @@ const RouteComponent = Component.make(function* AsyncRendering() {
 // )
 
 
-class AsyncComponent extends Component.make(function* AsyncComponent() {
+class AsyncComponent extends Component.make(Effect.fnUntraced(function* AsyncComponent() {
     const SubComponentFC = yield* SubComponent
 
     yield* Effect.sleep("500 millis") // Async operation
@@ -63,16 +63,16 @@ class AsyncComponent extends Component.make(function* AsyncComponent() {
             <SubComponentFC />
         </Flex>
     )
-}).pipe(
+})).pipe(
     Suspense.suspense,
     Suspense.withOptions({ defaultFallback: <p>Loading...</p> }),
 ) {}
 class MemoizedAsyncComponent extends Memoized.memo(AsyncComponent) {}
 
-class SubComponent extends Component.make(function* SubComponent() {
+class SubComponent extends Component.make(Effect.fnUntraced(function* SubComponent() {
     const [state] = React.useState(yield* Hooks.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
     return <Text>{state}</Text>
-}) {}
+})) {}
 
 export const Route = createFileRoute("/dev/async-rendering")({
     component: RouteComponent