Paginación de Cursos con React y TanStack Query

Clase 30 de 31 • Curso de React Avanzado

Resumen

Domina una paginación fluida en React con un enfoque práctico y eficiente. Aquí verás cómo calcular y renderizar solo los cursos necesarios por página usando memoization, cómo evitar renders innecesarios con useMemo y cómo integrar Tank Stack Query con Suspense y React.memo para una carga controlada y confiable.

¿Cómo optimizar el render con memoization y useMemo?

Para pintar la lista de cursos por página, se crea una variable derivada llamada currentCourses con useMemo. Así, solo se recalcula cuando cambian sus dependencias y se evita un rerender costoso.

Definir currentCourses con useMemo y retornar un slice del array original.
Usar dependencias: cursos, página actual y cursos por página.
Manejar el caso sin datos: retornar un array vacío.

¿Qué dependencias necesita useMemo?

courses: fuente de datos a paginar.
currentPage: página actual seleccionada.
coursesPerPage: cantidad de cursos por página.

¿Cómo se implementa currentCourses?

const currentCourses = useMemo(() => {
  if (!courses?.length) return [];

  const indexOfLast = currentPage * coursesPerPage;
  const indexOfFirst = indexOfLast - coursesPerPage;

  return courses.slice(indexOfFirst, indexOfLast);
}, [courses, currentPage, coursesPerPage]);

¿Cómo calcular índices y usar slice para paginar correctamente?

La lógica clave es obtener el índice del último elemento y restarle la cantidad de cursos por página para hallar el índice del primero. Con eso, slice corta el segmento exacto a renderizar.

indexOfLast = currentPage × coursesPerPage.
indexOfFirst = indexOfLast − coursesPerPage.
Usar courses.slice(indexOfFirst, indexOfLast) para obtener currentCourses.

¿Cómo detectar y corregir errores de índices?

Durante el debugging, un console.log reveló índices invertidos: primero 2 y segundo 0, impidiendo ver cursos. Se corrigieron los nombres y el orden: indexOfLast y indexOfFirst.

console.log('courses', courses);
console.log({ indexOfFirst, indexOfLast });

Datos importantes del escenario: - array de cursos con 6 elementos. - Paginación de 2 cursos por página. - Evitar errores retornando [] si no hay cursos.

¿Cómo integrar Tank Stack Query, Suspense y React.memo en el main?

El main necesita un QueryClientProvider para que la app consuma la API. Se crea un QueryClient, se envuelve la aplicación y se usa Suspense con un fallback que muestra "Loading courses" mientras llega la información. Además, React.memo ayuda a memorizar el componente y prevenir renders innecesarios.

Envolver la app con provider y pasar la prop client.
Usar Suspense con fallback para el estado de carga.
Memorizar el componente de lista con React.memo.

¿Cuál es el esqueleto del main con provider y Suspense?

import React, { Suspense } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
  <Suspense fallback={<div>Loading courses</div>}>
    <CourseList />
  </Suspense>
</QueryClientProvider>

¿Cómo se aplica React.memo al listado?

const CourseList = (props) => {
  // ... lógica de render y paginación
};

export default React.memo(CourseList);

Extras prácticos mencionados: - Título visual:

Learning Courses

para mejorar la UI. - Ajustes de estilos en index.css. - Uso de useTransition y code splitting para transiciones fluidas.

Claves que te llevas: - memoization para evitar cálculos y renders innecesarios. - useMemo con dependencias correctas para paginación. - slice para cortar rangos de cursos. - QueryClientProvider y QueryClient para el consumo de datos. - Suspense con fallback para manejar loading. - React.memo para componentes más ligeros.

¿Tienes dudas sobre los índices, el fallback o la configuración del provider? Comenta tus preguntas o comparte cómo estructuraste tu paginación en React.

Víctor Rolack

student•

Un cursito de Tanstack estaría interesante :D es una poderosa herramienta que tiene mucho que mostrarnos

Mariano Ostric

student•

Para ver la funcionalidad de Memoizacion, se puede hacer un console.log("renders") en el componente App, y otro en CourseList, podriamos hacer un contador en el componente app con dos botones se suma y resta para actualizar el estado del contador, y asi ver que al interactual con los botones no se renderiza el componente CourseList porque el estado sigue siendo el mismo, luego podemos quitar React.memo del componente CourseList e interactuar con los botones de nuevo y ver como ambos componentes son renderizados cuando el contador cambia su estado.const App: React.FC = () => { const { data: courses, isLoading, error } = useCourses(); const [currentPage, setCurrentPage] = useState(1); const coursesPerPage = 2; const [isPending, startTransition] = useTransition(); const [count, setCount] = useState(0);import React from "react"; interface Course { id: number; title: string; description: string; duration: string;}

const CourseList: React.FC<{ courses: Course[]}> = React.memo(({ courses }) => { console.log('CourseList renders') return ( <ul> { courses.map(course => ( <li key={course.id}> <h3>{course.title}</h3> <p>{course.description}</p> <p>{course.duration}</p> </li> )) } </ul> )}) export default CourseList const currentCourses = useMemo(() => { if (!courses) return []; const lastIndex = currentPage * coursesPerPage; const firstIndex = lastIndex - coursesPerPage; return courses?.slice(firstIndex, lastIndex); }, [currentPage, courses]); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; if (!courses) return <div>No courses available</div>; console.log("renders"); return ( <section> <h2>Learning courses</h2> <Suspense fallback={<div>Loading...</div>}> <CourseList courses={currentCourses} /> </Suspense> <div> {Array.from({ length: Math.ceil(courses.length / coursesPerPage) }).map( (_, index) => ( <button key={index} onClick={() => { startTransition(() => setCurrentPage(index + 1)); }} > {index + 1} </button> ) )} </div> {isPending && <div>Loading more courses...</div>} <div> <button onClick={() => setCount((prev) => prev - 1)}>-</button> <p>{count}</p> <button onClick={() => setCount((prev) => prev + 1)}>+</button> </div> </section> );}; export default App;```js const App: React.FC = () => { const { data: courses, isLoading, error } = useCourses(); const [currentPage, setCurrentPage] = useState(1); const coursesPerPage = 2; const [isPending, startTransition] = useTransition(); const [count, setCount] = useState(0);

const currentCourses = useMemo(() => { if (!courses) return []; const lastIndex = currentPage * coursesPerPage; const firstIndex = lastIndex - coursesPerPage; return courses?.slice(firstIndex, lastIndex); }, [currentPage, courses]);

if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; if (!courses) return <div>No courses available</div>;

console.log("renders");

return ( <section> <h2>Learning courses</h2> <Suspense fallback={<div>Loading...</div>}> <CourseList courses={currentCourses} /> </Suspense> <div> {Array.from({ length: Math.ceil(courses.length / coursesPerPage) }).map( (_, index) => ( <button key={index} onClick={() => { startTransition(() => setCurrentPage(index + 1)); }} > {index + 1} </button> ) )} </div> {isPending && <div>Loading more courses...</div>} <div> <button onClick={() => setCount((prev) => prev - 1)}>-</button> <p>{count}</p> <button onClick={() => setCount((prev) => prev + 1)}>+</button> </div> </section> ); };

export default App;

import React from "react";

interface Course {
  id: number;
  title: string;
  description: string;
  duration: string;
}


const CourseList: React.FC<{ courses: Course[]}> = React.memo(({ courses }) => {
  console.log('CourseList renders')
  return (
    <ul>
      {
        courses.map(course => (
          <li key={course.id}>
            <h3>{course.title}</h3>
            <p>{course.description}</p>
            <p>{course.duration}</p>
          </li>
        ))
      }
    </ul>
  )
})

export default CourseList
```al quitar React.memo, se puede ver en consola como ambos componentes son re renderizados cuando el estado del contador cambia, con memo al actualizar el contador el componente CourseList no se re renderiza ya que el estado no cambia.

Daniel Fernando Reyes Vasquez

student•

Para los stilos:

Juan Camilo Noreña López

student•

La memoización es una técnica de optimización que evita cálculos repetidos almacenando resultados de funciones. En React, se utiliza useMemo para memorizar valores y prevenir re-renderizados innecesarios.

Suspense permite manejar el estado de carga de componentes. Al envolver un componente con Suspense, puedes mostrar un fallback (como un mensaje de carga) mientras se espera que los datos estén disponibles.

En la clase se implementó paginación utilizando memoización para calcular los cursos por página y Suspense para manejar la carga de datos, optimizando así el rendimiento de la aplicación.

import React from "react";

interface Course {
  id: number;
  title: string;
  description: string;
  duration: string;
}


const CourseList: React.FC<{ courses: Course[]}> = React.memo(({ courses }) => {
  console.log('CourseList renders')
  return (
    <ul>
      {
        courses.map(course => (
          <li key={course.id}>
            <h3>{course.title}</h3>
            <p>{course.description}</p>
            <p>{course.duration}</p>
          </li>
        ))
      }
    </ul>
  )
})

export default CourseList
```al quitar React.memo, se puede ver en consola como ambos componentes son re renderizados cuando el estado del contador cambia, con memo al actualizar el contador el componente CourseList no se re renderiza ya que el estado no cambia.

Paginación de Cursos con React y TanStack Query

Patrones de renderizado y composición

React Memo: cuándo optimizar componentes

Render Props y Composición en React: Ventajas y Desventajas

Control de Props en React: Comunicación entre Componentes Padres e Hijos

Patrón Compound Components en React: Creación de un Componente de Tabs

Cómo crear un Higher Order Component con TypeScript

Custom Hooks vs HOC en React con loading

Container Presenter: separar lógica y UI en React

Componentes Controlados y No Controlados en Formularios React

Navegación con React Router

Single Page Application vs Server Side Rendering con React Router

Enrutamiento Dinámico y Navegación Programática en React Router

Rutas Anidadas y Lazy Loading en React con React Router Dom

Rutas Protegidas y Redirecciones en React con Autenticación

Manejo del estado en React

Estado Global en React: Uso de Context y Provider para Notificaciones

Custom hooks con React Context y TypeScript

Gestión de Estado Complejo con useReducer en React

useReducer con TypeScript: crear reducer tipado

Emoji ToDo con useReducer en React

Flujo de Comunicación en Redux: Estado Global y Acciones

Creación de Reducer para Manejo de Emojis en Lista de Tareas

Creación de un Todo List con React Redux y Reducers

Manejo de Estado Global con Sustand en Aplicaciones React

Creación de un ToDo List con Emojis usando React y Sustand

Máquinas de Estado en Desarrollo Web: Configuración y Uso Práctico

Configuración de Máquina de Estados: Crear y Gestionar Vistas y Pasos

Componente StateMachineWizard con pasos validados

Visualización de Máquinas de Estado con XState

Comunicación con servidor y data fetching

TanStack Query: Hook personalizado para React

Implementación de Code Splitting y Manejo de Errores en React

Paginación Asíncrona con Concurrent Mode en React