Docs

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>()(
-  "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 <p>{greeting.greet(props.name)}</p>
 })
-
-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