logo studio roma
EN / ES

Back to Blog

Scroll Infinito

Pablo Romera foto

Pablo Romera 

/

 October 20, 2023 / 4 min read

Pablo Romera foto

Construyendo un Desplazamiento Infinito en React desde Cero

Descubre los secretos para implementar un desplazamiento infinito en React. Sumérgete en nuestra guía paso a paso que cubre todo, desde la configuración hasta técnicas avanzadas para un desplazamiento sin interrupciones.

Introducción

¿Buscas mejorar tus aplicaciones en React con experiencias de desplazamiento suaves e ininterrumpidas? El desplazamiento infinito es una técnica popular utilizada en el desarrollo web moderno, permitiendo a los usuarios desplazarse continuamente a través del contenido sin necesidad de paginación. En este artículo, profundizaremos en las complejidades de construir un desplazamiento infinito en React desde cero, ofreciendo una combinación de experiencia técnica, ejemplos prácticos y consejos perspicaces para elevar tus habilidades.

La Base: Estado Inicial y Configuración del Entorno

Antes de sumergirnos en el código del desplazamiento infinito, configuraremos nuestro entorno React y estableceremos el estado inicial para nuestro componente de desplazamiento infinito.

Configurando el Estado Inicial

Cada componente en React prospera en la gestión del estado, y el desplazamiento infinito no es una excepción. Comenzaremos configurando el estado inicial para nuestro componente. Esto incluye inicializar un arreglo para los elementos que mostraremos, indicadores de carga y error, y una variable para rastrear el número de página actual. Utilizando los hooks useState y useEffect de React, sentaremos las bases para nuestra funcionalidad de desplazamiento infinito.

import React, { useState, useEffect } from "react";

const InfiniteScrollExample = () => {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [page, setPage] = useState(1);

  // ... rest of the component
};

Mecánicas del Desplazamiento Infinito

Obteniendo Datos y Gestionando el Estado

Ahora, centrémonos en la funcionalidad principal de nuestro desplazamiento infinito: obtener datos y actualizar el estado. Crearemos una función para obtener datos de un punto final de API. Esta función se llamará cada vez que el usuario se desplace cerca del fondo de la página, cargando contenido adicional.

Aquí hay un ejemplo básico de una función de obtención de datos en nuestro componente:

const fetchData = async () => {
  setIsLoading(true);
  setError(null);

  try {
    const response = await fetch(`https://api.example.com/items?page=${page}`);
    const data = await response.json();

    setItems((prevItems) => [...prevItems, ...data]);
    setPage((prevPage) => prevPage + 1);
  } catch (error) {
    setError(error);
  } finally {
    setIsLoading(false);
  }
};

useEffect(() => {
  fetchData();
}, []);

Construyendo el Desplazamiento Infinito

Extendiendo nuestra configuración básica, primero crearemos una función para manejar el evento de desplazamiento. Esta función verificará si el usuario ha llegado al fondo de la página y llamará a obtenerDatos si es necesario. Añadiremos un oyente de eventos de desplazamiento al objeto window y lo eliminaremos cuando se desmonte el componente:

const handleScroll = () => {
  if (
    window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight ||
    isLoading
  ) {
    return;
  }
  fetchData();
};

useEffect(() => {
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
}, [isLoading]);

Finalmente, renderizamos los elementos, el indicador de carga y cualquier mensaje de error dentro del componente:

return (
  <div>
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
    {isLoading && <p>Loading...</p>}
    {error && <p>Error: {error.message}</p>}
  </div>
);

Con esto, tenemos una implementación de desplazamiento infinito completamente funcional construida desde cero. Este enfoque permite una personalización extensa y más control sobre la funcionalidad. Sin embargo, puede requerir más tiempo y mantenimiento que usar una biblioteca o componente existente.

Conclusión

El desplazamiento infinito es más que una implementación técnica; es una manera de mejorar la experiencia y el compromiso del usuario. Siguiendo las pautas y técnicas descritas en este artículo, puedes implementar un desplazamiento infinito efectivo en tus aplicaciones React, proporcionando a los usuarios una experiencia de navegación sin interrupciones y atractiva.