Introducción

Vemos desplazamiento infinito en aplicaciones y páginas web, especialmente en redes sociales, que quieren que simplemente nos desplacemos. Si bien desplazarse sin pensar no es bueno, crear tu propio desplazamiento infinito es increíble. Como desarrollador, deberíamos intentar recrear los componentes que vemos mientras navegamos por la web. Puede desafiarlo a aprender más y a pensar de manera innovadora al implementar algunos componentes.

Además, si está buscando implementar un desplazamiento infinito en su aplicación, puede seguir la guía para crear el suyo propio. Puedes agregar tu propio código para mejorar el comportamiento del desplazamiento.

En este artículo, vamos a crear un componente de desplazamiento infinito desde cero. Cubrirá los siguientes temas:

• Configuración del entorno
• Construyendo el componente
• Añadiendo CSS
• Optimizando el desplazamiento infinito

Ahora comencemos.

Configuración del entorno

Vamos a utilizar CRA para crear la aplicación React básica. Puedes hacerlo ejecutando el siguiente comando:

    npx create-react-app infinite-scroll

Si deseas Vite o NextJS, también puedes hacerlo. Aparte de cambios menores, otras cosas seguirán igual.

Nota: Para ejecutar este comando, debes tener NodeJS preinstalado. Además, elimine parte del código repetitivo innecesario de CRA.

Vamos a necesitar una dependencia para recuperar datos de una API. Después de configurar React, podemos instalar Axios con el siguiente comando:

    npm install axios

Ahora estamos listos para crear el componente.

Componente de la aplicación

Vamos a crear un componente que recuperará datos de películas populares de la API de Tmdb. Es gratis, puede obtener su clave API desde su sitio web. Primero desarrollemos dónde obtienen los datos y luego agreguemos funciones de desplazamiento infinito.

Aquí está el código del componente de la aplicación:

Aplicación.js

    import "./App.css";
    import { useState, useEffect } from "react";
    import axios from "axios";
    import { MovieCard } from "./MovieCard";

    function App() {
      const [page, setPage] = useState(1); // for number of page in tmdb 
      const [data, setData] = useState([]); // storing the fetched data
      const [loading, setLoading] = useState(false); // for setting loading state

      // fetching and stroring the data in the state
      const fetchMovie = async () => {
        const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
        const data = await axios.get(URL, {
          headers: {
            Authorization:
              "Bearer API KEY",
            Accept: "application/json",
          },
        });
        setData((prevData) => [...prevData, ...data.data.results]); // we are going to add the new data to current data.
        setLoading(false);
      };

      // useEffecte for invoking the function at the start
      useEffect(() => {
        fetchMovie();
      }, [page]);

      return (
        

          

            Popular movies according to Tmdb
            

              {data.length > 1 &&
                data.map((item) => {
                  return (
                    
                  );
                })}
              {loading && 
Loading....
}
            
          
      );
    }

    export default App;

Puedes comprender bastante bien el código, donde obtenemos los datos y los pasamos al componente MovieCard como accesorio.

Cree un componente MovieCard.js para mostrar la información de cada película.

MoveCard.js

    import React from "react";

    export const MovieCard = ({ title, description, imageURL, rating }) => {

      const imagePath = `https://image.tmdb.org/t/p/w500${imageURL}`; // poster image path URL 

      return (
        

          

            
{title}
            
{description}
            
{rating.toFixed(1)}⭐
          
        
      );
    };

Aquí está el CSS de la aplicación:

Aplicación.css

    .App {
      text-align: center;
    }

    .App-header {
      background-color: #282c34;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 1em;
      font-size: calc(10px   2vmin);
      color: white;
    }

    .movieCardContainer{
      margin-top: 1em;
      display: flex;
      flex-direction: column;
      gap: 1em;
      width: 60%;
      max-width: 800px;
    }

    .movieCard{
      display: flex;
    }

    .movieInfo{
      margin-left: 1em;
      text-align: left;
    }

    p{
      font-size: 18px;
    }

Pergamino infinito

Ahora, primero, comprendamos cómo vamos a construir el pergamino infinito. Para ello, nos fijaremos en la posición de la barra de desplazamiento. Cuando la posición de la barra de desplazamiento esté justo encima del final de la página, estableceremos el estado de carga en verdadero.

Vamos a tener otro useEffect que incrementará el estado de la página en 1. Una vez que se actualice el número de página, se activará el useEffect inicial que tiene la página como dependencia. Esto invocará la función fetchMovie() para recuperar los datos.

Agregar EventListner para desplazarse

Primero, agregaremos incluso escuchar para saber cuándo se cambia la posición de la barra de desplazamiento.

    window.addEventListener("scroll", handleScroll);

manejarDesplazarse

Cuando se realice el desplazamiento, comprobaremos si la posición actual de la barra de desplazamiento está justo encima de la parte inferior de la página web (es decir, el área total de desplazamiento vertical). En caso afirmativo, cambiaremos el estado de carga a verdadero.

    const handleScroll = () => {
      if (document.body.scrollHeight - 300 

• scrollHeight: Es la propiedad que devuelve la altura total del contenido, incluyendo la parte que no es visible en la pantalla. Entonces, será el área total desplazable.
• scrollY: Es la propiedad que devuelve el número de píxeles que el documento se ha desplazado verticalmente desde la parte superior. Entonces será el área que se ha desplazado.
• innerHeight: Es la propiedad que devuelve la altura del área de contenido de Windows del navegador. Será el ancho de la barra de desplazamiento. Se agrega a scrollY para que la recuperación se realice cuando alcanzamos el contenido en lugar de cuando lo pasamos. ## usoEfecto

Después de cambiar exitosamente el estado de carga, podemos implementar un useEffect para incrementar el número de página. Para que pueda realizarse la recuperación de los datos de la película.

    useEffect(() => {
      if (loading == true) {
        setPage((prevPage) => prevPage   1);
      }
    }, [loading]);

    // other useEffect that we already implemented

    useEffect(() => {
      fetchMovie();
    }, [page]);

Optimizando el eventListner

Dado que el desplazamiento puede activar handleScroll varias veces mientras se desplaza, provocará una invocación innecesaria de la función varias veces. Podemos agregar rebote a la función para que pueda tomar algún tiempo antes de invocar la función.

    // debounce function
    function debounce(func, delay) {
      let timeoutId;
      return function (...args) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    }

    // adding debounce to the eventListner
    window.addEventListener("scroll", debounce(handleScroll, 500));

Aquí está el código completo de App.js:

    import "./App.css";
    import { useState, useEffect } from "react";
    import axios from "axios";
    import { MovieCard } from "./MovieCard";

    function App() {
      const [page, setPage] = useState(1);
      const [data, setData] = useState([]);
      const [loading, setLoading] = useState(false);
      const fetchMovie = async () => {

        const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
        const data = await axios.get(URL, {
          headers: {
            Authorization:
              "Bearer API KEY",
            Accept: "application/json",
          },
        });
        setData((prevData) => [...prevData, ...data.data.results]);
        setLoading(false);
      };
      useEffect(() => {
        fetchMovie();
      }, [page]);

      const handleScroll = () => {
        if (
          document.body.scrollHeight - 300  {
            func(...args);
          }, delay);
        };
      }

      window.addEventListener("scroll", debounce(handleScroll, 500));

      useEffect(() => {
        if (loading == true) {
          setPage((prevPage) => prevPage   1);
        }
      }, [loading]);

      return (
        

          

            Popular movies according to Tmdb
            

              {data.length > 1 &&
                data.map((item) => {
                  return (
                    
                  );
                })}
              {loading && 
Loading....
}
            
          
      );
    }

    export default App;

Aquí está el GIF que demuestra el funcionamiento de la aplicación.

Conclusión

Crear un componente de desplazamiento infinito en React puede ser una experiencia muy gratificante. No solo mejora su comprensión de cómo funciona el desplazamiento, sino que también le enseña sobre gestión de estado, detectores de eventos y técnicas de optimización como la eliminación de rebotes. Al seguir esta guía, ahora tienes una configuración básica de desplazamiento infinito que puedes personalizar y mejorar según tus necesidades.

Ya sea que muestre datos de películas, publicaciones de blog o cualquier otro contenido, este componente sirve como una base sólida. Recuerde, la clave es garantizar una experiencia de usuario fluida gestionando cuidadosamente cuándo y cómo se obtienen los datos a medida que el usuario se desplaza. ¡Feliz codificación!