diff --git a/packages/example/src/routes/dev/memo.tsx b/packages/example/src/routes/dev/memo.tsx index e2e2bdd..aede091 100644 --- a/packages/example/src/routes/dev/memo.tsx +++ b/packages/example/src/routes/dev/memo.tsx @@ -1,16 +1,41 @@ import { runtime } from "@/runtime" +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 } from "effect-fc" +import * as React from "react" -const RouteComponent = Component.make(function*() { - return <> +const RouteComponent = Component.make(function* RouteComponent() { + const VSubComponent = yield* Component.useFC(SubComponent) + const VMemoizedSubComponent = yield* Component.useFC(MemoizedSubComponent) + + const [value, setValue] = React.useState("") + + return ( + + setValue(e.target.value)} + /> + + + + + ) }).pipe( Component.withRuntime(runtime.context) ) +const SubComponent = Component.make(function* SubComponent() { + const id = yield* makeUuid4.pipe(Effect.provide(GetRandomValues.CryptoRandom)) + return {id} +}) - +const MemoizedSubComponent = Component.memo(SubComponent) +console.log(SubComponent) +console.log(MemoizedSubComponent) export const Route = createFileRoute("/dev/memo")({ component: RouteComponent,