> ## Documentation Index
> Fetch the complete documentation index at: https://trigger.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React hooks for real-time task updates

> Subscribe to background task progress, stream AI responses, and trigger tasks from React components using @trigger.dev/react-hooks.

**`@trigger.dev/react-hooks` gives your React components live access to background tasks.** Subscribe to run progress, stream AI output as it generates, or trigger tasks directly from the browser.

## Installation

Install the `@trigger.dev/react-hooks` package in your project:

```bash npm theme={"theme":"css-variables"}
npm add @trigger.dev/react-hooks
```

```bash pnpm theme={"theme":"css-variables"}
pnpm add @trigger.dev/react-hooks
```

```bash yarn theme={"theme":"css-variables"}
yarn add @trigger.dev/react-hooks
```

## Authentication

All hooks require authentication with a Public Access Token. Pass the token via the `accessToken` option:

```tsx theme={"theme":"css-variables"}
import { useRealtimeRun } from "@trigger.dev/react-hooks";

export function MyComponent({
  runId,
  publicAccessToken,
}: {
  runId: string;
  publicAccessToken: string;
}) {
  const { run, error } = useRealtimeRun(runId, {
    accessToken: publicAccessToken,
    baseURL: "https://your-trigger-dev-instance.com", // optional, only needed if you are self-hosting Trigger.dev
  });

  // ...
}
```

Learn more about [generating and managing tokens in our authentication guide](https://trigger.dev/docs/realtime/auth.md).

## Available hooks

| Hook category | What it does | Guide |
| - | - | - |
| **Trigger hooks** | Trigger tasks from the browser | [Triggering](https://trigger.dev/docs/realtime/react-hooks/triggering.md) |
| **Run updates** | Subscribe to run status, metadata, and tags | [Run updates](https://trigger.dev/docs/realtime/react-hooks/subscribe.md) |
| **Streaming** | Consume AI output, file chunks, or any continuous data | [Streaming](https://trigger.dev/docs/realtime/react-hooks/streams.md) |
| **SWR hooks** | One-time fetch with caching (not recommended for most cases) | [SWR](https://trigger.dev/docs/realtime/react-hooks/swr.md) |

## SWR vs Realtime hooks

We offer two "styles" of hooks: SWR and Realtime. SWR hooks use the [swr](https://swr.vercel.app/) library to fetch data once and cache it. Realtime hooks use [Trigger.dev Realtime](https://trigger.dev/docs/realtime.md) to subscribe to updates as they happen.

> [!NOTE]
>
> It can be a little confusing which one to use because [swr](https://swr.vercel.app/) can also be
> configured to poll for updates. But because of rate-limits and the way the Trigger.dev API works,
> we recommend using the Realtime hooks for most use cases.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.