Introdução

Vemos rolagem infinita em aplicativos e páginas da web, especialmente em mídias sociais que desejam apenas rolar. Embora rolar sem pensar não seja bom, construir seu próprio pergaminho infinito é incrível. Como desenvolvedor, devemos tentar recriar componentes que vemos enquanto navegamos na web. Pode desafiá-lo a aprender mais e pensar fora da caixa ao implementar alguns componentes.

Além disso, se você deseja implementar uma rolagem infinita em seu aplicativo, siga o guia para criar a sua própria. Você pode adicionar seu próprio código para melhorar o comportamento da rolagem.

Neste artigo, vamos construir um componente de rolagem infinita do zero. Abordará os seguintes tópicos:

• Configuração do ambiente
• Construindo o Componente
• Adicionando CSS
• Otimizando a rolagem infinita

Agora, vamos começar.

Configuração do ambiente

Vamos usar CRA para criar o aplicativo React básico. Você pode fazer isso executando o seguinte comando:

    npx create-react-app infinite-scroll

Se você deseja Vite ou NextJS, você também pode. Além de pequenas alterações, outras coisas permanecerão as mesmas.

Nota: Para executar este comando, você precisa ter o NodeJS pré-instalado. Além disso, remova alguns dos códigos clichê desnecessários do CRA.

Precisaremos de uma dependência para buscar dados de uma API. Após configurar o React, podemos instalar o Axios com o seguinte comando:

    npm install axios

Agora estamos prontos para criar o componente.

Componente do aplicativo

Vamos construir um componente que irá buscar dados de filmes populares da API Tmdb. É grátis, você pode obter a chave API no site deles. Vamos construir primeiro onde eles estão buscando os dados e, em seguida, adicionar recursos de rolagem infinita.

Aqui está o código do componente do aplicativo:

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); // 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;

Você pode entender muito bem o código, onde estamos buscando os dados e passando-os para o componente MovieCard como um suporte.

Crie um componente MovieCard.js para exibir as informações de cada filme.

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)}⭐
          
        
      );
    };

Aqui está o CSS do aplicativo:

App.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;
    }

Pergaminho Infinito

Agora, vamos primeiro entender como vamos construir o pergaminho infinito. Para isso, veremos a posição da barra de rolagem. Quando a posição da barra de rolagem estiver logo acima do final da página, definiremos o estado de carregamento como verdadeiro.

Teremos outro useEffect que aumentará o estado da página em 1. Assim que o número da página for atualizado, o useEffect inicial que tem a página como dependência será acionado. Isso invocará a função fetchMovie() para buscar os dados.

Adicionando EventListner à rolagem

Primeiro, vamos adicionar até ouvir para saber quando a posição da barra de rolagem é alterada.

    window.addEventListener("scroll", handleScroll);

identificadorScroll

Quando a rolagem acontecer, vamos verificar se a posição atual da barra de rolagem está logo acima da parte inferior da página da web (ou seja, área total de rolagem vertical). Se sim, então estamos alterando o estado de carregamento para verdadeiro.

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

• scrollHeight : É a propriedade que retorna a altura total do conteúdo, incluindo a parte que não está visível na tela. Então, será a área total rolável.
• scrollY: É a propriedade que retorna a quantidade de pixels que o documento foi rolado verticalmente a partir do topo. Então será a área que foi rolada.
• innerHeight: É a propriedade que retorna a altura da área de conteúdo do Windows do navegador. Será a largura da barra de rolagem. Ele é adicionado a scrollY para que a busca aconteça quando alcançamos o conteúdo, e não quando passamos o conteúdo. ## useEfeito

Depois de alterar com sucesso o estado de carregamento, podemos implementar um useEffect para incrementar o número da página. Assim, a busca dos dados do filme pode acontecer.

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

    // other useEffect that we already implemented

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

Otimizando o eventListner

Como a rolagem pode acionar handleScroll várias vezes durante a rolagem, isso causará a invocação desnecessária da função várias vezes. Podemos adicionar debounce à função para que demore algum tempo antes de invocar a função.

    // 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));

Aqui está o código completo do 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;

Aqui está o GIF demonstrando o funcionamento do aplicativo.

Conclusão

Construir um componente de rolagem infinita no React pode ser uma experiência altamente gratificante. Ele não apenas aprimora sua compreensão de como funciona a rolagem, mas também ensina sobre gerenciamento de estado, ouvintes de eventos e técnicas de otimização, como debouncing. Seguindo este guia, você agora tem uma configuração básica de rolagem infinita que pode personalizar e melhorar de acordo com suas necessidades.

Esteja você exibindo dados de filmes, postagens de blog ou qualquer outro conteúdo, esse componente serve como uma base sólida. Lembre-se de que o segredo é garantir uma experiência tranquila para o usuário, gerenciando cuidadosamente quando e como os dados são buscados conforme o usuário rola a tela. Boa codificação!