Docs

packages/docs/docs/getting-started.md

@@ -366,6 +366,35 @@ and its scoped lifecycle can restart with the new environment. For services that
 should not trigger that behavior, pass their tags with `Component.withOptions({
 nonReactiveTags: [...] })`.
 
+## Provide Services To A Subtree
+
+Use `Component.useContextFromLayer` when an Effect-FC component should provide
+extra services to another Effect-FC component. It turns a `Layer` into a runtime
+context that can be provided to `.use`.
+
+```tsx title="src/GreetingPageView.tsx"
+import { Effect } from "effect"
+import { Component } from "effect-fc"
+import { GreetingView } from "./Greeting"
+import { GreetingService } from "./services"
+
+const GreetingLive = GreetingService.Default({
+  greet: (name: string) => `Welcome, ${name}`,
+})
+
+export const GreetingPageView = Component.make("GreetingPage")(function* () {
+  const context = yield* Component.useContextFromLayer(GreetingLive)
+  const Greeting = yield* Effect.provide(GreetingView.use, context)
+
+  return <Greeting name="Effect" />
+})
+```
+
+The layer passed to `useContextFromLayer` should be stable. If a new layer value
+is created on every render, Effect-FC has to build a new context, which can
+cause unnecessary re-renders and scoped lifecycle restarts. Define static layers
+outside the component, or memoize layers that depend on React props or state.
+
 ## Where To Go Next
 
 Once the runtime and component boundary are in place, the rest of the library