Loader (React Router)

Definition

Fonction associee a une route qui charge les donnees avant le rendu du composant. Les donnees sont accessibles via useLoaderData().

Analogie

Comme un serveur qui prepare ta table avant que tu arrives : tout est pret quand tu t'assois.

Exemple de code

// Definition
export async function userLoader({ params }) {
  return fetch(`/api/users/${params.id}`);
}
// Route: { path: 'users/:id', loader: userLoader, element: <User /> }
// Composant
function User() {
  const user = useLoaderData();
  return <p>{user.name}</p>;
}

Cas d'usage

Pre-charger les donnees d'une page avant le rendu pour eviter les waterfalls de fetching.

Termes lies