Docs

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<A>` 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 (
+      <section>
+        <p>Count: {count}</p>
+        <button onClick={increment}>Increment</button>
+        <button onClick={reset}>Reset</button>
+      </section>
+    )
+  },
+)
+```
+
 ## Lenses
 
 A `Lens<A>` is a `Subscribable<A>` that can also be written to. If a component