Cleanup

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

@@ -9,8 +9,8 @@ import * as React from "react"
 
 // Generator version
 const RouteComponent = Component.make(function* AsyncRendering() {
-    const VMemoizedAsyncComponent = yield* MemoizedAsyncComponent
-    const VAsyncComponent = yield* AsyncComponent
+    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
+    const AsyncComponentFC = yield* AsyncComponent
     const [input, setInput] = React.useState("")
 
     return (
@@ -20,8 +20,8 @@ const RouteComponent = Component.make(function* AsyncRendering() {
                 onChange={e => setInput(e.target.value)}
             />
 
-            <VMemoizedAsyncComponent fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
-            <VAsyncComponent />
+            <MemoizedAsyncComponentFC fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
+            <AsyncComponentFC />
         </Flex>
     )
 }).pipe(
@@ -51,13 +51,15 @@ const RouteComponent = Component.make(function* AsyncRendering() {
 
 
 class AsyncComponent extends Component.make(function* AsyncComponent() {
-    const VSubComponent = yield* Component.useFC(SubComponent)
-    yield* Effect.sleep("500 millis")
+    const SubComponentFC = yield* SubComponent
+
+    yield* Effect.sleep("500 millis") // Async operation
+    // Cannot use React hooks after the async operation
 
     return (
         <Flex direction="column" align="stretch">
             <Text>Rendered!</Text>
-            <VSubComponent />
+            <SubComponentFC />
         </Flex>
     )
 }).pipe(