diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx index 0b2e479..7e92581 100644 --- a/packages/example/src/routes/dev/async-rendering.tsx +++ b/packages/example/src/routes/dev/async-rendering.tsx @@ -1,5 +1,5 @@ import { runtime } from "@/runtime" -import { Text, TextField } from "@radix-ui/themes" +import { Flex, Text, TextField } from "@radix-ui/themes" import { createFileRoute } from "@tanstack/react-router" import { GetRandomValues, makeUuid4 } from "@typed/id" import { Console, Effect } from "effect" @@ -8,17 +8,21 @@ import * as React from "react" const RouteComponent = Component.make(function* AsyncRendering() { + const VMemoizedAsyncComponent = yield* Component.useFC(MemoizedAsyncComponent) const VAsyncComponent = yield* Component.useFC(AsyncComponent) const [input, setInput] = React.useState("") - return <> - setInput(e.target.value)} - /> + return ( + + setInput(e.target.value)} + /> - - + + + + ) }).pipe( Component.withRuntime(runtime.context) ) @@ -27,16 +31,18 @@ const AsyncComponent = Component.make(function* AsyncComponent() { yield* Console.log("rendering") const VSubComponent = yield* Component.useFC(SubComponent) - React.useState() yield* Effect.sleep("500 millis") - return <> - Rendered!
- - + return ( + + Rendered! + + + ) }).pipe( Component.suspense ) +const MemoizedAsyncComponent = Component.memo(AsyncComponent) const SubComponent = Component.make(function* SubComponent() { const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))