useLoaderData hook in Remix

Introduction

The useLoaderData hook lets you get data that your page needs before it shows up. It helps you show the right information quickly and easily.

When you want to fetch data on the server before showing a page.

When you need to access data loaded by your route's loader function.

When you want to avoid loading spinners by having data ready at render time.

When you want to share data between server and client in Remix.

When you want to keep your UI and data loading logic clean and separate.

Syntax

Remix

const data = useLoaderData();

You call useLoaderData inside your React component.

It returns the data that your route's loader function sends.

Examples

Basic example showing how to get data and display a message.

Remix

import { useLoaderData } from '@remix-run/react';

export default function MyPage() {
  const data = useLoaderData();
  return <div>{data.message}</div>;
}

Shows the loader function returning data and the component using it.

Remix

export async function loader() {
  return { message: 'Hello from loader!' };
}

export default function MyPage() {
  const data = useLoaderData();
  return <h1>{data.message}</h1>;
}

Sample Program

This component uses useLoaderData to get a greeting message from the loader and shows it inside a heading and paragraph.

Remix

import { useLoaderData } from '@remix-run/react';

export async function loader() {
  return { greeting: 'Welcome to Remix!' };
}

export default function Welcome() {
  const data = useLoaderData();
  return (
    <main>
      <h1>{data.greeting}</h1>
      <p>This text comes from the loader data.</p>
    </main>
  );
}

Important Notes

Always define a loader function in your route to provide data for useLoaderData.

useLoaderData only works inside components rendered by Remix routes.

If your loader returns JSON, useLoaderData gives you that JSON parsed as an object.

Summary

useLoaderData gets data loaded by your route's loader function.

It helps show data immediately when your page loads.

Use it inside your React components to access server-loaded data easily.