diff --git a/packages/docs/docs/getting-started.md b/packages/docs/docs/getting-started.md index d2ab3f4..af28d4f 100644 --- a/packages/docs/docs/getting-started.md +++ b/packages/docs/docs/getting-started.md @@ -343,45 +343,13 @@ Use regular React hooks for local UI concerns, and reach for Effect-FC helpers when the component needs Effect services, scopes, resources, or Effect-powered callbacks. -## Use Services +## Use Tags -Components can yield Effect services directly. Define services with Effect, -provide them in your runtime layer, then consume them from the component body. - -```ts title="src/services.ts" -import { Effect } from "effect" - -export class GreetingService extends Effect.Service()( - "GreetingService", - { - succeed: { - greet: (name: string) => `Welcome, ${name}`, - }, - }, -) {} -``` - -Provide the service in your runtime: - -```tsx title="src/runtime.ts" -import { Layer } from "effect" -import { ReactRuntime } from "effect-fc" -import { GreetingService } from "./services" - -const AppLive = Layer.empty.pipe( - Layer.provideMerge(GreetingService.Default), -) - -export const runtime = ReactRuntime.make(AppLive) -``` - -Then read it inside a component: +Components can yield Effect tags directly in the component body. There is no +need to memoize the service yourself; just yield the tag wherever the component +needs it. ```tsx title="src/Greeting.tsx" -import { Component } from "effect-fc" -import { runtime } from "./runtime" -import { GreetingService } from "./services" - const GreetingView = Component.make("Greeting")(function* (props: { readonly name: string }) { @@ -389,12 +357,15 @@ const GreetingView = Component.make("Greeting")(function* (props: { return

{greeting.greet(props.name)}

}) - -export const Greeting = GreetingView.pipe( - Component.withRuntime(runtime.context), -) ``` +Service values in the runtime context are reactive by default. If a provided +service instance changes, Effect-FC recreates the React component function for +components that depend on that context, so the component reads the new service +and its scoped lifecycle can restart with the new environment. For services that +should not trigger that behavior, pass their tags with `Component.withOptions({ +nonReactiveTags: [...] })`. + ## Where To Go Next Once the runtime and component boundary are in place, the rest of the library