# composeRefs

Composes two element refs in order.

## Signatures

```ts
export declare function composeRefs<const First extends RefInput | null | undefined, const Second extends RefInput | null | undefined = undefined>(first: First, second?: Second): ComposedRef<First, Second> | undefined;
```

## Why

A component's internal ref and a caller's ref both need the real mounted
node. Each return value may be void, Effect, Stream, or Fx, and composition
normalizes those forms without hiding failures or services.

## Ownership and lifetime

The first ref runs before the second. Streams and Fx values are drained in
the caller's Scope and interrupted on unmount. The function throws
synchronously when both refs claim hydration ownership because applying two
serialized states to one element is ambiguous.

## Examples

```ts
import { composeRefs } from "@typed/ui/Dom/Refs"
import { Effect } from "effect"

const ref = composeRefs(
  (element: HTMLButtonElement) => Effect.sync(() => element.focus()),
  (element: HTMLButtonElement) => console.log(element)
)
```