Implementar infinite scrolling sin un límite puede romper tu aplicación o lanzar errores cuando la API se queda sin resultados. Aquí aprenderás a usar la propiedad total_pages de TheMovieDB para detener la carga automática justo cuando llegas al tope, evitando peticiones innecesarias y mejorando la experiencia del usuario.

Por qué necesitas limitar el infinite scroll en tu API

Cuando consumes una API paginada como TheMovieDB, cada respuesta incluye datos sobre los resultados disponibles. Si ignoras ese límite, tu aplicación seguirá pidiendo páginas que no existen y terminarás con errores poco amigables para el usuario.

En el caso de las tendencias, la API devuelve 20.000 resultados distribuidos en 1.000 páginas con 20 resultados cada una [03:10]. Difícilmente alguien hará scroll hasta la página 1000, pero en una página de búsqueda, donde quizá existan solo 100 o 500 películas de Vengadores o robots, el usuario sí puede alcanzar el tope en pocos minutos.

¿Qué es total_pages en TheMovieDB? Es una propiedad que devuelve la API e indica cuántas páginas de resultados existen para tu consulta. La encuentras en data.total_pages cuando usas Axios.

Cómo capturar maxPage desde la primera carga

La lógica empieza en la función inicial, no en la función paginada. ¿Por qué? Porque puede haber consultas sin paginación, y necesitas conocer el límite desde el primer fetch.

Dentro de getTrendingMovies, justo después de asignar las películas con movies = data.results, imprime el dato para confirmar:

javascript console.log(data.total_pages);

Esto te muestra desde la primera carga cuántas páginas tienes disponibles. En el caso de tendencias, verás 1000 en consola apenas recargues la página.

Cómo declarar la variable maxPage globalmente

Para que el dato esté disponible en todas las funciones, declara maxPage en el mismo nivel donde declaras page, pero sin asignarle valor inicial [05:30]:

javascript let page = 1; let maxPage;

Luego, dentro de getTrendingMovies, asigna el valor cuando llegue la respuesta:

javascript maxPage = data.total_pages;

Así, esa variable queda accesible desde cualquier función paginada de tu aplicación, incluyendo getPaginatedTrendingMovies.

Cómo construir la validación isNotMax para detener el scroll

Dentro de la función paginada ya tenías una validación que comprueba si el scroll llegó al final del contenedor. Ahora necesitas una segunda validación que pregunte si todavía puedes pedir más páginas.

La idea es comparar la página actual contra el máximo permitido. Una forma clara de leerlo es preguntando si la página actual es menor que el total disponible:

javascript const pageIsNotMax = page < maxPage;

Este nombre, pageIsNotMax, comunica intención: queremos avanzar solo si la página actual no ha alcanzado el tope.

¿Cómo evito que mi infinite scroll lance errores al final de la API? Combina dos condiciones antes de pedir la siguiente página: que el scroll haya tocado el fondo del contenedor y que page < maxPage. Si ambas se cumplen, incrementa page y haz la consulta.

Cómo combinar ambas condiciones en el scroll

La función paginada queda con una validación doble: el scroll debe estar al final y la página no puede ser la última. Solo cuando ambas se cumplen, sumas uno a page, llamas a la API, y renderizas las nuevas películas en el contenedor.

Al recargar la aplicación verás que el infinite scroll sigue funcionando en las páginas 1, 2, 3, 4, 5 y así sucesivamente, pero se detendrá automáticamente cuando llegue a 1000 sin lanzar errores ni hacer peticiones inútiles.

Por qué replicar este patrón en otras rutas no es tan directo

El siguiente paso lógico es aplicar la misma técnica a getMoviesByCategory y getMoviesBySearch, creando sus versiones paginadas. Pero hay un obstáculo importante.

Estas funciones reciben parámetros entre paréntesis: una categoría, un término de búsqueda. Eso complica asignarlas como callback a un evento de scroll, porque el listener no sabe cómo pasarles esos argumentos en cada ejecución.

La solución pasa por usar closures, una técnica de JavaScript que permite crear funciones que recuerdan el contexto y los argumentos con los que fueron creadas. Es la forma elegante de mantener referencias a parámetros sin perder la capacidad de ejecutar la función paginada de manera dinámica.

Antes de avanzar, intenta resolver el problema por tu cuenta. Crea las versiones paginadas de búsqueda y categoría, pruébalas, observa por qué fallan al recibir argumentos, y comparte en los comentarios qué solución probaste. ¿Lograste hacerlo funcionar o te topaste con el muro de los parámetros?