Cómo cargar datos por ruta con loaders

Cargar datos por ruta con loaders de React Router te permite mover la lógica de obtención de información fuera del componente y asociarla directamente a cada pantalla. Esto organiza mejor qué datos necesita cada vista y mejora el rendimiento porque solo consultas lo necesario. Es ideal para quienes construyen aplicaciones con React y buscan un código más limpio y rápido.

¿Qué problema resuelve mover la carga de datos a la ruta?

Hasta ahora, cada página cargaba sus datos dentro del componente. En el caso de la página de detalle de propiedad, el componente iba al listado completo, filtraba la propiedad que coincidía con el parámetro de la URL y recién ahí mostraba el resultado.

El problema es que el componente hace demasiado trabajo: se monta, intenta cargar la data, filtra y luego renderiza. React Router propone una forma más limpia y con mejor rendimiento: delegar esa carga a un loader asociado a la ruta.

¿Qué es un loader en React Router? Es una función asociada a una ruta que carga y prepara los datos antes de que el componente se renderice. Así el componente recibe la información ya lista, sin tener que filtrarla ni pedirla por su cuenta.

Cuando entras a la ruta properties/1 [00:34], la información deja de venir del componente y pasa a venir de una precarga por ruta.

¿Cómo simplificar el componente con useLoaderData?

El primer paso ocurre dentro de PropertyDetailPage. Antes leía los parámetros de la URL y hacía un find sobre todas las propiedades para encontrar la que coincidía. Todo eso desaparece.

Estos son los cambios que dejan el componente mucho más limpio:

• Eliminas el manejo del error de propiedad no encontrada, que renderizaba Property Not Found [01:12]. Se maneja más adelante de forma más robusta.
• Dejas de usar los parámetros dentro del componente y pasas a usar el hook useLoaderData [01:35].
• Ya no necesitas leer el id, porque viene por default [01:41].
• Borras el find que recibía todas las propiedades y filtraba la coincidente [01:46].

Después de limpiar todo eso, defines la propiedad directamente con el loader y le indicas su tipo:

tsx const property = useLoaderData() as Property;

El type de property es el único tipo definido hasta el momento en la aplicación [02:11], y describe todos los parámetros de una propiedad. Con esto, el archivo baja bastante en líneas de código.

Aquí viene el detalle importante: si pruebas en el navegador, el home carga tranquilo, pero al hacer clic en una propiedad aparece un error [03:03]. Es normal, porque le dijiste a la página que muestre datos desde un loader que todavía no existe.

¿Cómo crear y conectar el PropertyDetailLoader?

El loader es solo funcional, no renderiza nada, así que no necesita extensión .tsx. Creas un archivo PropertyDetailLoader.ts dentro de una carpeta loaders.

¿Un loader necesita ser un componente con TSX? No. Como no renderiza interfaz, basta con un archivo .ts que contenga la función. Se encarga solo de obtener y preparar los datos.

Esto es lo que hace el loader por dentro [03:36]:

1. Importa las propiedades directamente desde data.
2. Detecta los params que vienen desde la URL.
3. Hace el filtro que antes hacía el DetailPage, pero ahora antes de mostrar el componente.
4. Si la propiedad no existe, lanza un error de propiedad no encontrada con status 404.

Un detalle práctico: la carpeta loaders debe quedar a la misma altura que componentes, data y layouts, no dentro de componentes [04:16]. Si la anidas mal, aparecen errores de importación.

Pero guardar el loader no basta. Todavía verás el error en el navegador porque falta el paso final: registrar el loader en el router.

¿Por qué hay que registrar el loader en el router?

Cuando usas loaders, tienes que ir a tu router y especificar que esa ruta usará uno. Le indicas que PropertyDetailPage ahora utiliza PropertyDetailLoader y agregas su import desde la carpeta de loaders [05:12].

Sin ese registro, el router llama a un loader que no está definido y marca error. Una vez importado y asignado a la ruta, guardas y la URL de propiedades funciona correctamente.

Al volver al home y entrar de nuevo a Loft Urbano, la carga se siente más rápida [05:34]. Con data local casi no se aprecia, porque no hay una llamada a una API de por medio.

¿Cuándo importa de verdad la precarga por ruta?

En aplicaciones más robustas esta ventaja se nota muchísimo. El navegador ya no carga el componente y, en medio de eso, además pide y filtra la data. En cambio, el loader hace una precarga por ruta y entrega exactamente la información que se necesita renderizar [06:01].

El componente recibe datos listos y no tiene que decidir nada sobre qué mostrar. Menos trabajo para el componente, más claridad para ti y mejor rendimiento para quien usa la aplicación.

El siguiente paso será aplicar lazy loading de páginas para no cargar todo el código desde el inicio y esperar a que la data esté disponible [06:38]. ¿Ya identificaste qué rutas de tu proyecto podrían beneficiarse de un loader? Cuéntanos en los comentarios.