> ## Documentation Index
> Fetch the complete documentation index at: https://trigger-v3-trigger-api-redesign.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# useRunDetails()

> 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 { useRunDetails } 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>