Loader (React Router)

Définition

Fonction associée à une route qui charge les données avant le rendu du composant (modes data et framework de React Router). En mode framework (depuis la v7, 22 novembre 2024), le composant reçoit loaderData typé en prop via les types générés Route.LoaderArgs et Route.ComponentProps.

Analogie

Comme un serveur qui prépare ta table avant que tu arrives : tout est prêt quand tu t'assois.

Exemple de code

// app/routes/user.tsx (framework mode, v7+)
import type { Route } from './+types/user';

export async function loader({ params }: Route.LoaderArgs) {
  const user = await getUser(params.id);
  return { user };            // plus besoin de json()
}

export default function User({ loaderData }: Route.ComponentProps) {
  return <p>{loaderData.user.name}</p>;   // typé automatiquement
}
// Mode data : useLoaderData() reste disponible

Cas d'usage

Pre-charger les données d'une page avant le rendu pour éviter les waterfalls de fetching.

Termes liés

Sources

• reactrouter.com/start/modes
• remix.run/blog/react-router-v7