Data Loading
Forget
useEffect. React Router v7 loads data before rendering using loader functions.Creating a Loader
Export a
loader function from your route file. It runs on the server (if SSR is enabled) or client.tsx
1import { useLoaderData } from "react-router";
2
3export async function loader({ params }) {
4 const user = await db.getUser(params.id);
5 return { user };
6}
7
8export default function UserProfile() {
9 const { user } = useLoaderData();
10 return <h1>Hello, {user.name}</h1>;
11}Type Safety
You can infer types directly from the loader:
ts
1import type { Route } from "./+types/home";
2
3export function loader({}: Route.LoaderArgs) {
4 // ...
5}