useLoaderData

Detailed Explanation

useLoaderData is a React Router Hook that lets your Component access the data fetched by the route's loader Function.

When a user navigates to a Route, React Router calls the loader function first. The loader typically queries your Database (like Supabase) and returns data. Inside your component, you call useLoaderData() to grab that data and render it on the page.

import { useLoaderData } from 'react-router-dom';

export default function PostsPage() {
  const { posts } = useLoaderData();
  return posts.map(post => <PostCard key={post.id} {...post} />);
}

The key benefit is that the data is available before the component renders — no loading spinners or flickering. The loader handles all the async work, and your component simply receives the finished data through this hook.

If the loader throws an error, React Router catches it and shows an Error Boundary instead of crashing the page. This makes useLoaderData part of a clean separation: loaders handle data fetching, components handle rendering, and error boundaries handle failures.