Consume route data
A route component needs the result produced by its route loader.
TanStack · Hook
useLoaderData
useLoaderData returns loader data from the closest matching route. It supports route-based type narrowing and optional selection of a derived value.
How it works
useLoaderData reads the loader result associated with the closest matching route. Pass the route identifier with from for precise inference, optionally transform the value with select, and use strict to control how types are resolved.
Syntax
useLoaderData({ from?, strict?, select?, structuralSharing? })Parameters
| Name | Type | Description |
|---|---|---|
from | string | Route id of the closest parent match; optional, but recommended for full type safety. |
strict | boolean | Controls type narrowing; defaults to true. If false, from is ignored and types are loosened. |
select | (loaderData: TLoaderData) => TSelected | Transforms loader data and returns the transformed value. |
structuralSharing | boolean | Controls structural sharing for the value returned by select. |
Returns
The selected value when select is provided; otherwise the route's loader data, or loosened loader data when strict is false.
Key points
- The hook reads data belonging to the nearest matching route in the rendered component hierarchy.
- Configuration is supplied as one options object rather than positional arguments.
- The from option identifies the route match whose loader data the component intends to consume.
- Although from is not mandatory, providing it gives TypeScript a narrower and more reliable result type.
- select can project the full loader result into a smaller value for the component.
- structuralSharing controls whether the selected result uses structural sharing.
Common mistakes
- Setting strict to false discards the narrowing supplied by from and broadens the inferred loader-data type.
- A select result participates in shallow-equality checks, so return a stable selected value when avoiding unnecessary parent renders matters.
Example: Read route loader data
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => ({
postId: params.postId,
title: 'Example post',
}),
component: Post,
})
function Post() {
const data = Route.useLoaderData()
return <h1>{data.title}</h1>
}The route loader returns data, and the route component reads that result with the route-scoped hook.
When to use it
Select derived data
A component needs only one field or a derived projection of a larger loader result.
Control type narrowing
A shared component reads loader data while preserving or intentionally relaxing route-specific typing.
Interview questions
QWhat does useLoaderData return?
It returns loader data from the closest RouteMatch in the component tree. With a select function, it returns the selected result instead of the complete loader value.
Follow-up: How can a component obtain precise types? Pass the relevant route id through from; this is optional but recommended for full type safety.
QWhich options does useLoaderData provide?
The hook accepts an options object containing from, strict, select, and structuralSharing. from identifies the closest parent match, while select transforms the loader data before it is returned.
Follow-up: What does select receive? It receives the loader-data value and its return value becomes the hook result.
QHow does strict affect typing?
strict defaults to true. When strict is false, from is ignored and the returned type is loosened to account for the shared types of possible loader data.
Follow-up: When is strict false useful? It can be used when a component intentionally consumes loader data without narrowing to one route match.
Related
Route.useLoaderDataloaderRouteMatchgetRouteApi