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 16s
Details

Browse Source
This commit is contained in:
Julien Valverdé
2026-06-09 11:09:47 +02:00
parent 0a59fdf2b4
commit d3525aaad7
1 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/docs/getting-started.md
+19 -9
View File
@@ -204,9 +204,14 @@ export const MountedMessageView = Component.make("MountedMessage")(
) )
``` ```
Use `Component.useOnMount` for work that should run once for the component Use `Component.useOnMount` when the component needs a value produced by an
instance and return a cached value. Use `Component.useOnChange` when the scoped Effect during its first render. The value is then cached for the component
work should be recreated when dependencies change. instance.
Use `Component.useOnChange` when render needs the value computed by
scoped work that depends on changing inputs. When a dependency changes, React
re-renders the component and the hook computes the next value during that
render.
```tsx ```tsx
import { Console, Effect } from "effect" import { Console, Effect } from "effect"
@@ -243,18 +248,22 @@ need a lifecycle that is narrower than the whole component instance.
The most common Effect-FC hooks are: The most common Effect-FC hooks are:
- `Component.useOnMount`: run an Effect once for the component instance and Unlike plain React hooks, Effect-FC hooks return Effects. Use `yield*` to run
return its value. them inside the component body.
- `Component.useOnMount`: run an Effect once during the component's first render
after mount, and return its value. The Effect must be synchronous.
```tsx ```tsx
const initialData = yield* Component.useOnMount(() => loadInitialData) const initialData = yield* Component.useOnMount(() => loadInitialData)
``` ```
- `Component.useOnChange`: run an Effect again when dependencies change and - `Component.useOnChange`: when a dependency changes, React re-renders the
return its latest value. component and the Effect is run again inside the component body. It returns
the latest value, so the Effect must be synchronous too.
```tsx ```tsx
const user = yield* Component.useOnChange(() => fetchUser(id), [id]) const label = yield* Component.useOnChange(() => formatUserLabel(id), [id])
``` ```
- `Component.useReactEffect`: Effect-powered `React.useEffect` with scoped - `Component.useReactEffect`: Effect-powered `React.useEffect` with scoped
@@ -264,7 +273,8 @@ const user = yield* Component.useOnChange(() => fetchUser(id), [id])
yield* Component.useReactEffect(() => subscribe(id), [id]) yield* Component.useReactEffect(() => subscribe(id), [id])
``` ```
- `Component.useReactLayoutEffect`: Effect-powered `React.useLayoutEffect`. - `Component.useReactLayoutEffect`: Effect-powered `React.useLayoutEffect` with scoped
finalizers.
```tsx ```tsx
yield* Component.useReactLayoutEffect(() => measure(ref), []) yield* Component.useReactLayoutEffect(() => measure(ref), [])