El code splitting en React te permite cargar componentes solo cuando los necesitas, en lugar de enviar todo el bundle de una sola vez. Aquí aprendes a aplicarlo con React.lazy en una app de cursos y a manejar estados de carga y error con un custom hook basado en TanStack Query.
¿Qué es code splitting y por qué importa en una app de React?
La idea es simple: en vez de cargar todo el código al arrancar la aplicación, divides ese código y traes cada pieza cuando realmente la vas a usar. Así reduces el peso inicial y mejoras el tiempo de carga.
¿Qué es code splitting? Es una técnica que divide tu bundle de JavaScript en partes más pequeñas que se cargan bajo demanda, en lugar de descargarse todas al inicio.
En nuestro caso, el componente CourseList se carga de forma lazy, solo cuando la app lo necesita renderizar.
¿Cómo crear el componente CourseList con TypeScript?
Antes de aplicar lazy loading, necesitas el componente que vas a cargar dinámicamente. Empezamos definiendo la interfaz del curso para tipar todo correctamente.
La interfaz Course describe la forma de cada curso:
id de tipo number.title de tipo string.description de tipo string.duration de tipo string.
Luego declaramos el componente como React.FunctionComponent, recibiendo courses como prop tipada con la interfaz anterior. Dentro del return, renderizamos un ul y mapeamos cada curso a un li que muestra el título, la descripción y la duración. Para evitar el return explícito dentro del .map, usamos paréntesis en la arrow function.
tsx
interface Course {
id: number;
title: string;
description: string;
duration: string;
}
const CourseList: React.FunctionComponent<{ courses: Course[] }> = ({ courses }) => {
return (
<ul>
{courses.map((course) => (
<li key={course.id}>
<h3>{course.title}</h3>
<p>{course.description}</p>
<span>{course.duration}</span>
</li>
))}
</ul>
);
};
export default CourseList;
Fíjate en la key={course.id}: React la necesita para identificar cada elemento de forma única dentro de la lista.
¿Cómo aplicar React.lazy y manejar errores con un custom hook?
Aquí viene la parte interesante. En App no importamos CourseList de forma normal; lo cargamos con React.lazy, que recibe una función con un import() dinámico apuntando al componente.
tsx
const CourseList = React.lazy(() => import('./components/CourseList'));
Esto le dice al bundler que separe CourseList en un chunk aparte y solo lo descargue cuando se vaya a renderizar.
¿Cómo conectar el custom hook useCourses?
El hook useCourses, construido sobre TanStack Query, expone tres piezas clave que vamos a desestructurar:
data renombrada como courses.isLoading para el estado de carga.error para el manejo de errores.
¿Para qué sirve TanStack Query aquí? Te entrega listo el estado de loading, error y data al consumir una API, así no tienes que manejarlos a mano con useState y useEffect.
¿Cómo cubrir los estados de carga, error y lista vacía?
Antes de renderizar la lista, devolvemos vistas distintas según el estado. La lógica usa early returns para que cada caso corte la ejecución.
tsx
import useCourses from './hooks/useCourses';
const App: React.FunctionComponent = () => {
const { data: courses, isLoading, error } = useCourses();
if (isLoading) return <p>Cargando</p>;
if (error) return <p>Error: {String(error)}</p>;
if (!courses) return <p>No se han encontrado cursos</p>;
return <CourseList courses={courses} />;
};
export default App;
Cada return actúa como un filtro: si está cargando, muestra el texto de carga y nada más se ejecuta. Si hay error, muestra el mensaje del error que llega desde la librería. Si no hay cursos, avisa que no se encontraron. Solo cuando todo está bien, renderiza el componente lazy.
¿Por qué usar early returns en lugar de ternarios anidados? Porque mantienen el componente legible: cada estado tiene su salida y no terminas con condicionales encadenados difíciles de seguir.
¿Qué ganas combinando lazy loading y manejo de estados?
La combinación te da dos beneficios al mismo tiempo. Por un lado, el usuario descarga menos JavaScript al entrar a la app porque CourseList viaja en su propio chunk. Por otro, la UI siempre comunica algo claro: cargando, error, vacío o datos. Nada de pantallas en blanco mientras llega la información.
En la siguiente entrega seguimos con la aplicación de cursos y entramos al paginado, otro paso clave para listas grandes. ¿Ya estás aplicando code splitting en tus proyectos? Cuéntame en los comentarios cómo te ha funcionado.
