From 436dc275b3fb60167200a7a930d9deaf762ce813 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Tue, 9 Jun 2026 20:34:24 +0200 Subject: [PATCH] Docs --- packages/docs/docs/state-management.md | 31 +++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/docs/docs/state-management.md b/packages/docs/docs/state-management.md index 1806b47..8fa58ea 100644 --- a/packages/docs/docs/state-management.md +++ b/packages/docs/docs/state-management.md @@ -69,7 +69,7 @@ For simple UI state that is not shared and does not need Effect integration, prefer regular React state. A local "show details" toggle is usually better as `React.useState(false)` than as a Lens. -## Subscribables +## Subscribable.useAll A `Subscribable` is reactive state with a current value and a stream of changes. Use `Subscribable.useAll` whenever a component needs to bind @@ -106,6 +106,35 @@ const CounterReadOnlyView = Component.make("CounterReadOnly")( `Subscribable.useAll` reads the current values during render and uses scoped subscriptions to update React state when changes arrive. +When the state is a `Lens`, keep binding it with `Subscribable.useAll` and +write to it with `Lens.set` or `Lens.update` from an Effect-FC callback: + +```tsx +const CounterControlsView = Component.make("CounterControls")( + function* () { + const state = yield* CounterState + const [count] = yield* Subscribable.useAll([state.count]) + + const increment = yield* Component.useCallbackSync( + () => Lens.update(state.count, (n) => n + 1), + [state.count], + ) + const reset = yield* Component.useCallbackSync( + () => Lens.set(state.count, 0), + [state.count], + ) + + return ( +
+

Count: {count}

+ + +
+ ) + }, +) +``` + ## Lenses A `Lens
` is a `Subscribable` that can also be written to. If a component