Implementando Rolagem Infinita em React: Um Guia Completo
Já se deparou com websites ou aplicativos que exibem conteúdo adicional à medida que você rola a página? Esse recurso, conhecido como rolagem infinita, tornou-se uma técnica bastante popular.
A rolagem infinita facilita a navegação por grandes volumes de informações, proporcionando uma experiência de usuário mais fluida, especialmente em dispositivos móveis.
Em React, a rolagem infinita pode ser implementada de diversas maneiras. Uma abordagem comum é utilizar bibliotecas como `react-infinite-scroll-component`. Essa biblioteca dispara um evento quando o usuário chega ao final da página, sinalizando o momento ideal para carregar mais conteúdo.
Outra forma de implementar a rolagem infinita em React é através de suas funções nativas. `componentDidMount`, por exemplo, é uma função chamada quando um componente é montado pela primeira vez. Você pode utilizá-la para carregar o lote inicial de dados.
Para os carregamentos subsequentes, você pode usar a função `componentDidUpdate`, que é acionada sempre que um componente é atualizado, permitindo carregar dados conforme o usuário rola a página.
Além disso, React Hooks também podem ser empregados para adicionar a funcionalidade de rolagem infinita aos seus componentes.
Utilizando o Componente react-infinite-scroll
Para começar, é preciso instalar o componente:
npm install react-infinite-scroll-component --save
Importando o Componente para o seu Projeto React
Após a instalação, importe a biblioteca para o seu componente:
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>Rolagem Infinita</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Carregando...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Você viu tudo!</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Este código importa o React e o componente `InfiniteScroll`. Ele cria um componente com estado inicializado com um array de itens vazio e um sinalizador `hasMore` como verdadeiro.
Configurando os Parâmetros
No método `componentDidMount`, o método `fetchData` é chamado com o parâmetro `page` definido como 1. O método `fetchData` simula uma chamada de API, gerando dados fictícios. Neste exemplo, um array de 100 itens é criado.
Quando o parâmetro `page` atinge 100 (indicando que não há mais itens), o sinalizador `hasMore` é definido como `false`, impedindo que o componente `InfiniteScroll` faça mais chamadas à API. Finalmente, o estado é atualizado com os novos dados.
O método `render` utiliza o componente `InfiniteScroll`, passando diversas propriedades como `dataLength` (tamanho do array), `next` (o método `fetchData`), `hasMore` (o sinalizador `hasMore`), `loader` (indicador de carregamento) e `endMessage` (mensagem exibida quando todos os dados são carregados).
Além dessas, outras propriedades podem ser passadas ao componente `InfiniteScroll`, mas estas são as mais comuns.
Implementando com Funções Integradas
React também oferece métodos nativos para implementar a rolagem infinita.
O primeiro é o `componentDidUpdate`, chamado após uma atualização do componente. Ele pode ser usado para verificar se o usuário chegou ao final da página e, em caso afirmativo, carregar mais dados.
O segundo é o evento `scroll`, disparado quando o usuário rola a página. Usando esse evento, é possível monitorar a posição da rolagem e carregar dados adicionais quando o usuário se aproxima do fim da página.
A seguir, um exemplo de rolagem infinita usando esses métodos:
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 utiliza os hooks `useState` e `useEffect` para gerenciar o estado e os efeitos colaterais.
O hook `useEffect` chama o método `fetchData` com a página atual. Novamente, o método `fetchData` simula uma chamada à API e gera dados fictícios.
O loop `for` preenche o array `newItems` com 100 números inteiros. Se o parâmetro `page` for 100, o sinalizador `hasMore` é definido como `false`, impedindo futuras chamadas à API.
Por fim, o estado é atualizado com os novos dados.
O método `onScroll` monitora a posição da rolagem. Ao atingir o final da página, mais dados são carregados.
O hook `useEffect` adiciona um escutador de eventos para o evento `scroll`. Quando o evento `scroll` é disparado, o método `onScroll` é executado.
A rolagem infinita em React possui vantagens e desvantagens. Embora ela aprimore a interface do usuário com uma experiência de navegação mais suave, principalmente em dispositivos móveis, existe o risco de os usuários perderem conteúdo, caso não rolem a página até o final.
Portanto, é essencial ponderar os prós e contras antes de implementar a rolagem infinita em seu site ou aplicativo.
Adicionar a rolagem infinita ao seu projeto React.js pode melhorar significativamente a experiência do usuário, eliminando a necessidade de cliques para visualizar mais conteúdo. Além disso, ela pode reduzir o número de carregamentos de página, otimizando o desempenho.
Você também pode realizar o deploy do seu aplicativo React nas páginas do Github de forma gratuita.