Back to React Router

useLoaderData

docs/api/hooks/useLoaderData.md

7.6.21.2 KB
Original Source

useLoaderData

<!-- ⚠️ ⚠️ IMPORTANT ⚠️ ⚠️ Thank you for helping improve our documentation! This file is auto-generated from the JSDoc comments in the source code, so please edit the JSDoc comments in the file below and this file will be re-generated once those changes are merged. https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/hooks.tsx -->

[MODES: framework, data]

Summary

Reference Documentation ↗

Returns the data from the closest route loader or clientLoader.

tsx
import { useLoaderData } from "react-router";

export async function loader() {
  return await fakeDb.invoices.findAll();
}

export default function Invoices() {
  let invoices = useLoaderData<typeof loader>();
  // ...
}

Signature

tsx
function useLoaderData<T = any>(): SerializeFrom<T>

Returns

The data returned from the route's loader or clientLoader function