React components,
powered by Effect.

import { Effect } from "effect"
import { Async, Component } from "effect-view"
import { Users } from "./services"

export const UserCard = Component.make("UserCard")(
  function* ({ userId }: { userId: string }) {
    const users = yield* Users

    const user = yield* Component.useOnChange(
      () => users.find(userId),
      [userId],
    )

    yield* Component.useReactEffect(
      () => Effect.forkScoped(users.watch(userId)),
      [userId],
    )

    return (
      <article>
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </article>
    )
  },
).pipe(Async.async)