Como adicionar scroll infinito em React.js

Já alguma vez se deparou com um sítio Web ou uma aplicação que carrega e apresenta mais conteúdo à medida que se desloca? É a isto que chamamos scroll infinito.

A rolagem infinita é uma metodologia cada vez mais comum que pode facilitar a leitura de volumes substanciais de dados e melhorar a experiência geral do usuário, principalmente em dispositivos portáteis.

Implementando a rolagem infinita no React.js

Existem vários métodos disponíveis para implementar a rolagem infinita em um aplicativo React, uma dessas abordagens envolve a utilização de uma biblioteca chamada react-infinite-scroll-component . Esse componente específico da biblioteca monitora o comportamento de rolagem do usuário e emite um evento quando ele chega ao final da página. Ao aproveitar este evento, pode então iniciar o carregamento de conteúdo adicional.

Para incorporar uma instância de rolagem infinita em um aplicativo React, é possível aproveitar as funcionalidades inerentes fornecidas pelo framework. Entre essas funcionalidades está o método “componentDidMount”, que o React ativa ao inicializar um componente.

Pode utilizar esta funcionalidade para carregar um conjunto inicial de dados e, posteriormente, utilizar o método “componentDidUpdate” para obter informações adicionais à medida que o utilizador percorre a página.

Os React Hooks podem ser utilizados para implementar uma funcionalidade de deslocamento infinito na sua aplicação, proporcionando uma experiência de utilizador perfeita à medida que o conteúdo é carregado continuamente sem interrupção.

Usando a biblioteca react-infinite-scroll-component

Várias abordagens podem ser empregadas ao utilizar o componente React Infinite Scroll.

Instalar react-infinite-scroll-component

Para iniciar a utilização, a etapa inicial envolve a instalação por meio do Node Package Manager (npm).

 npm install react-infinite-scroll-component --save 

Importar react-infinite-scroll-component para o React

Após o ato de montagem, é necessário incorporar a biblioteca de scroll infinito no seu elemento React.

 import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
 
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      items: [],
      hasMore: true
    }
  }

  componentDidMount() {
    this.fetchData(1)
  }
 
  fetchData = (page) => {
    const newItems = []
 
    for (let i = 0; i < 100; i\\+\\+) {
      newItems.push(i )
    }
 
    if (page === 100) {
      this.setState({ hasMore: false })
    }
 
    this.setState({ items: [...this.state.items, ...newItems] })
  }
 
  render() {
    return (
      <div>
        <h1>Infinite Scroll</h1>
        <InfiniteScroll
          dataLength={this.state.items.length}
          next={this.fetchData}
          hasMore={this.state.hasMore}
          loader={<h4>Loading...</h4>}
          endMessage={
            <p style={{ textAlign: 'center' }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {this.state.items.map((item, index) => (
            <div key={index}>
              {item}
            </div>
          ))}
        </InfiniteScroll>
      </div>
    )
  }
}
 
export default App

O código importa o React e o componente InfiniteScroll da biblioteca react-infinite-scroll-component, criando posteriormente um componente com estado. O estado inicial do componente é composto por uma matriz “items” vazia e um sinalizador “hasMore” que é definido como true.

Definir parâmetros

No método do ciclo de vida componentDidMount , é imperativo invocar a função fetchData com um parâmetro page definido como 1 . O procedimento fetchData efectua um pedido API para recuperar dados.Essa instância do scroller infinito do React produz dados fictícios e constrói um array contendo cem elementos.

Ao atingir um valor de cem para o parâmetro page, indicando que não há itens adicionais disponíveis, é prudente configurar o sinalizador “hasMore” como falso, impedindo assim quaisquer outras invocações do componente InfiniteScroll. Subsequentemente, a atualização do estado com o conjunto de dados recém-adquirido é um curso de ação eficaz.

O método render utiliza o componente InfiniteScroll , fornecendo determinadas propriedades como argumentos. Especificamente, à propriedade dataLength é atribuído um valor equivalente ao comprimento da matriz items . Além disso, a função fetchData serve como outra propriedade fornecida. Por fim, a propriedade hasMore é definida como o valor do sinalizador hasMore .

A propriedade loader funciona apresentando o conteúdo do componente como uma indicação de carregamento. Da mesma forma, após a conclusão de todo o carregamento de dados, a propriedade endMessage é apresentada como uma mensagem dentro do componente.

Ao utilizar o componente InfiniteScroll, é comum utilizar determinadas propriedades que são frequentemente utilizadas. No entanto, também é possível fornecer props adicionais conforme necessário.

Usando funções incorporadas

O React fornece um conjunto de funcionalidades inerentes que permitem a implementação do InfiniteScroll por meio da utilização de seus métodos incorporados.

O método do ciclo de vida componentDidUpdate do React é invocado pelo framework após a atualização de um componente. Essa abordagem orientada por eventos permite que os desenvolvedores implementem uma lógica personalizada para detetar quando novos dados precisam ser obtidos com base na posição de rolagem do usuário. Essencialmente, o método serve como um mecanismo para determinar se o conteúdo adicional deve ser carregado abaixo do limite da janela de visualização atual após a deteção de que o utilizador atingiu o fim da parte visível da página.

O React fornece um mecanismo interno chamado scroll , que é acionado pela ação de rolagem do usuário, permitindo que os desenvolvedores monitorem e mantenham a consciência da posição de rolagem atual dentro de seu aplicativo. Esta abordagem orientada por eventos permite o carregamento dinâmico de conteúdo adicional à medida que o utilizador atinge o fundo do intervalo de páginas visíveis, garantindo uma experiência de navegação optimizada.

O código fornecido demonstra uma instância de utilização das técnicas mencionadas acima no contexto de um aplicativo React, especificamente em relação à implementação de uma funcionalidade de rolagem infinita.

 import React, {useState, useEffect} from 'react'
 
function App() {
  const [items, setItems] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)
 
  useEffect(() => {
    fetchData(page)
  }, [page])
 
  const fetchData = (page) => {
    const newItems = []
 
    for (let i = 0; i < 100; i\\+\\+) {
      newItems.push(i)
    }
 
    if (page === 100) {
      setHasMore(false)
    }
 
    setItems([...items, ...newItems])
  }
 
  const onScroll = () => {
    const scrollTop = document.documentElement.scrollTop
    const scrollHeight = document.documentElement.scrollHeight
    const clientHeight = document.documentElement.clientHeight
 
    if (scrollTop \\+ clientHeight >= scrollHeight) {
      setPage(page \\+ 1)
    }
  }
 
  useEffect(() => {
    window.addEventListener('scroll', onScroll)
    return () => window.removeEventListener('scroll', onScroll)
  }, [items])
 
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          {item}
        </div>
      ))}
    </div>
  )
}
 
export default App 

Este código emprega a utilização dos ganchos useState e useEffect para facilitar a gestão do estado e implementar os efeitos secundários desejados na aplicação.

No âmbito do gancho useEffect , a presente iteração da função invoca o método fetchData passando como parâmetro o estado atual da paginação. O referido método executa então um pedido HTTP para obter informações de uma fonte externa. A título meramente ilustrativo, neste caso estamos a simular a geração de alguns dados hipotéticos para exemplificar o conceito que está a ser discutido.

O ciclo for acrescenta iterativamente uma série de elementos à matriz newItems , aumentando o seu valor gradualmente até atingir cem. Simultaneamente, se o valor predeterminado do parâmetro page ultrapassar cem, então a variável booleana hasMore é definida como falsa, parando assim quaisquer pedidos adicionais feitos pelo mecanismo de deslocamento infinito.

Por fim, estabelecer o estado atual com base nas informações actualizadas.

O método onScroll mantém um registo da posição de deslocamento atual e, ao chegar ao fim da página, carrega dinamicamente conteúdos ou dados adicionais em resposta à interação do utilizador com a interface.

A utilização do useEffect Hook facilita a adição de um ouvinte para o evento de deslocação. Em resposta à ocorrência do referido evento, é invocado o método designado onScroll .

Os prós e contras do scroll infinito no React

A implementação do scroll infinito no React apresenta vantagens e desvantagens. Por um lado, esse recurso melhora a interface geral do usuário, fornecendo uma experiência de navegação perfeita, particularmente em plataformas móveis onde o espaço da tela é limitado. Por outro lado, existe o risco potencial de os utilizadores ignorarem conteúdos situados para além do seu ponto de vista inicial, uma vez que podem não ter percorrido o suficiente para ver todos os itens.

É crucial avaliar cuidadosamente as vantagens e desvantagens associadas à utilização de uma técnica de scroll infinito no web design, uma vez que esta abordagem pode ter implicações significativas na experiência e envolvimento do utilizador.

Melhorar a experiência do utilizador com o scroll infinito em React.js

A incorporação de um mecanismo de scroll infinito numa aplicação React.js pode melhorar a experiência geral do utilizador, eliminando a necessidade de cliques adicionais para aceder a mais conteúdo. Esta abordagem também tem o potencial de diminuir o número total de pedidos de página efectuados, aumentando assim a eficiência e o desempenho da aplicação.

Implantar um aplicativo React no GitHub Pages é um processo simples que não requer investimento monetário.