Docs

packages/docs/docs/getting-started.md

@@ -220,6 +220,69 @@ component's root scope directly. It creates and provides its own scope for that
 dependency window. Some other Effect-FC hooks follow the same pattern when they
 need a lifecycle that is narrower than the whole component instance.
 
+## Useful Effect-FC Hooks
+
+The most common Effect-FC hooks are:
+
+- `Component.useOnMount`: run an Effect once for the component instance and
+  return its value.
+
+```tsx
+const initialData = yield* Component.useOnMount(() => loadInitialData)
+```
+
+- `Component.useOnChange`: run an Effect again when dependencies change and
+  return its latest value.
+
+```tsx
+const user = yield* Component.useOnChange(() => fetchUser(id), [id])
+```
+
+- `Component.useReactEffect`: Effect-powered `React.useEffect` with scoped
+  finalizers.
+
+```tsx
+yield* Component.useReactEffect(() => subscribe(id), [id])
+```
+
+- `Component.useReactLayoutEffect`: Effect-powered `React.useLayoutEffect`.
+
+```tsx
+yield* Component.useReactLayoutEffect(() => measure(ref), [])
+```
+
+- `Component.useRunSync` and `Component.useRunPromise`: run Effects from React
+  event handlers.
+
+```tsx
+const runPromise = yield* Component.useRunPromise()
+
+return (
+  <button onClick={() => void runPromise(saveUser)}>
+    Save
+  </button>
+)
+```
+
+- `Component.useCallbackSync` and `Component.useCallbackPromise`: create stable
+  React callbacks.
+
+```tsx
+const save = yield* Component.useCallbackPromise(
+  (user: User) => saveUser(user),
+  [],
+)
+
+return <button onClick={() => void save(user)}>Save</button>
+```
+
+- `Component.useContextFromLayer`: create a React runtime context from an Effect
+  `Layer`.
+
+```tsx
+yield* Component.useContextFromLayer(UserLive)
+```
+
 ## Use React Normally
 
 An Effect-FC component is still a React function component. Anything you can do