Docs

packages/docs/docs/getting-started.md

@@ -215,10 +215,36 @@ const UserPanelEffect = Component.make("UserPanel")(
 ```
 
 In this example, changing `userId` closes the previous dependency scope before
-creating a new one. Unlike `useOnMount`, `useOnChange` does not expose the 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.
+creating a new one. Unlike `useOnMount`, `useOnChange` does not expose the
+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.
+
+## Use React Normally
+
+An Effect-FC component is still a React function component. Anything you can do
+in a regular React component can also be done in an Effect-FC component,
+including React hooks, refs, event handlers, context, and JSX composition.
+
+```tsx
+import { Component } from "effect-fc"
+import * as React from "react"
+
+const CounterEffect = Component.make("Counter")(function* () {
+  const [count, setCount] = React.useState(0)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+
+  return (
+    <button ref={buttonRef} onClick={() => setCount(count + 1)}>
+      Count: {count}
+    </button>
+  )
+})
+```
+
+Use regular React hooks for local UI concerns, and reach for Effect-FC helpers
+when the component needs Effect services, scopes, resources, or Effect-powered
+callbacks.
 
 ## Use Services