---
title: "useRunDetails()"
description: "The `useRunDetails()` React hook will show the live status of run."
---

This hook will automatically update until the run has either completed or failed.

There are a couple of ways you can get a runId to pass in:

- In the frontend you can get the runId from the `useEventDetails()` hook. Although if you want the first run triggered by an event, we suggest you use [useEventRunDetails()](/sdk/react/useeventrundetails).
- From the backend you can get the latest runs for a Job using the [client.getRuns()](/sdk/triggerclient/instancemethods/getruns) method. This will return an array of runs, including their ids. You can then pass an id to your frontend to display the live status.

<Note>
  You can get the full status of a Run from the backend using the
  [client.getRun()](/sdk/triggerclient/instancemethods/getrun) method.
</Note>

<Snippet file="react-query-note.mdx" />

## Parameters

<ResponseField name="runId" type="string | undefined" required>
  The run ID to get the details for.
</ResponseField>
<Snippet file="run-detail-hook-options.mdx" />

## Returns

<ResponseField name="data" type="object | undefined">
  The data returned from the server.
  <Expandable title="properties" defaultOpen>
    <Snippet file="run-object-detailed.mdx" />
  </Expandable>
</ResponseField>
<Snippet file="react-query-return.mdx" />

<RequestExample>

```typescript components/EventDetails.tsx
"use client";

import { useEventDetails } from "@trigger.dev/react";

export function EventDetails({ runId }: { runId: string }) {
  const { isLoading, isError, data, error } = useRunDetails(runId);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  //show the run status and all the tasks
  return (
    <div>
      <h2>Run status: {data?.status}</h2>
      <div>
        {data?.tasks?.map((task) => (
          <div className="flex gap-2 items-center">
            {task.status === "ERRORED"
              ? "⛔️"
              : task.status === "COMPLETED"
              ? "✅"
              : "⏳"}
            <div className="flex gap-1.5 items-center">
              <h4 className="text-base">{task.displayKey ?? task.name}</h4>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
```

</RequestExample>