Thilawyn/effect-fc
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Docs
Lint / lint (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Julien Valverdé
2026-06-09 11:27:39 +02:00
parent 3000ff2d87
commit eb81ff16d2
1 changed files with 11 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/docs/getting-started.md
+11 -40
View File
@@ -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 when the component needs Effect services, scopes, resources, or Effect-powered
callbacks. callbacks.
## Use Services ## Use Tags
Components can yield Effect services directly. Define services with Effect, Components can yield Effect tags directly in the component body. There is no
provide them in your runtime layer, then consume them from the component body. need to memoize the service yourself; just yield the tag wherever the component
needs it.
```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:
```tsx title="src/Greeting.tsx" ```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: { const GreetingView = Component.make("Greeting")(function* (props: {
readonly name: string readonly name: string
}) { }) {
@@ -389,12 +357,15 @@ const GreetingView = Component.make("Greeting")(function* (props: {
return <p>{greeting.greet(props.name)}</p> 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 ## Where To Go Next
Once the runtime and component boundary are in place, the rest of the library Once the runtime and component boundary are in place, the rest of the library