component-rendering

# Component Rendering

Handles streaming props and persistent component state.

## Quick Start

```tsx
const { streamStatus, propStatus } = useTamboStreamStatus<Props>();

if (streamStatus.isPending) return <Skeleton />;
if (streamStatus.isStreaming) return <LoadingIndicator />;
```

## Stream Status

Track overall and per-prop streaming status:

```tsx
import { useTamboStreamStatus } from "@tambo-ai/react";

function MyComponent({ title, items }: Props) {
  const { streamStatus, propStatus } = useTamboStreamStatus<Props>();

  // Global status
  if (streamStatus.isPending) return <Skeleton />;
  if (streamStatus.isStreaming) return <LoadingIndicator />;
  if (streamStatus.isError) return <Error message={streamStatus.streamError} />;

  // Per-prop status
  return (
    <h2 className={propStatus.title?.isStreaming ? "animate-pulse" : ""}>
      {title}
    </h2>
  );
}
```

### StreamStatus Properties

| Property      | Description                      |
| ------------- | -------------------------------- |
| `isPending`   | No tokens received yet           |
| `isStreaming` | Active streaming in progress     |
| `isSuccess`   | All props finished without error |
| `isError`     | Fatal error occurred             |
| `streamError` | Error object if failed           |

### PropStatus (per-prop)

| Property      | Description                  |
| ------------- | ---------------------------- |
| `isPending`   | No tokens for this prop yet  |
| `isStreaming` | Prop has partial content     |
| `isSuccess`   | Prop finished streaming      |
| `error`       | Error for this prop (if any) |

## Component State

Make state visible to AI and persist across sessions:

```tsx
import { useEffect } from "react";
import { useTamboComponentState, useTamboStreamStatus } from "@tambo-ai/react";

interface Props {
  title?: string;
}

function EditableCard({ title: streamedTitle }: Props) {
  const [title, setTitle, setFromProp] = useTamboComponentState("title", "");
  const { streamSt