useLoader

Returns the data from a route loader. The loader must be defined in the same file as the component using it.

Basic Usage

import { useLoader } from 'one'

export function loader() {
  return { hello: 'world' }
}

export default function Page() {
  const data = useLoader(loader)

  return (
    <>{data.hello}</>
  )
}

Automatic Refetching

Loaders automatically refetch when:

• The pathname changes (e.g., /home → /about)
• Dynamic params change (e.g., /user/1 → /user/2)
• Search params change (e.g., /search?q=hello → /search?q=world)

When to Use

Use useLoader when:

• You only need to access the loader data
• Automatic refetching based on route changes is sufficient
• You don’t need loading states or manual refetch control

For more advanced use cases like manual refetching, loading states, or accessing refetch from child components, see useLoaderState.

TypeScript

The hook is fully typed based on your loader’s return type:

export function loader() {
  return {
    user: { id: 1, name: 'John' },
    posts: [] as Post[]
  }
}

export default function Page() {
  const data = useLoader(loader)
  // TypeScript knows: data.user.name is string
  // TypeScript knows: data.posts is Post[]
}

Related

• useLoaderState - Advanced loader hook with refetch and state
• useMatches - Access loader data from any matched route
• Loaders - Defining route loaders
• Layout Loaders - Adding loaders to layouts