packages/docs/docs/state-management.md

@@ -22,8 +22,10 @@ core data model and transformation APIs belong to `effect-lens`, so check the
 
 ## Where To Store State
 
-State can live pretty much anywhere: in a service, in a layer, in a component
+State can live pretty much anywhere as a `Lens` or `Subscribable`: in a
-scope, or in plain React state. Pick the owner based on who needs the state.
+service, in a layer, in a component scope, or alongside plain React state. Pick
+the owner based on who needs the state. Once you have a Lens/Subscribable
+handle, pass it around however you like, including through React props.
 
 If state is shared by multiple components or belongs to application logic, store
 it in an Effect service:
@@ -56,10 +58,14 @@ import { Effect, SubscriptionRef } from "effect"
 import { Component, Lens, Subscribable } from "effect-fc"
 
 const LocalCounterView = Component.make("LocalCounter")(function* () {
-  const countLens = yield* Component.useOnMount(() =>
+  const state = yield* Component.useOnMount(() =>
-    Effect.map(SubscriptionRef.make(0), Lens.fromSubscriptionRef),
+    Effect.gen(function* () {
+      const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
+
+      return { count } as const
+    }),
   )
-  const [count] = yield* Subscribable.useAll([countLens])
+  const [count] = yield* Subscribable.useAll([state.count])
 
   return <p>Count: {count}</p>
 })