Domine o Infinite Scrolling em suas Aplicações React com React Query

Introdução ao Infinite Scrolling com React Query

O Infinite Scrolling é uma técnica que carrega mais conteúdo à medida que o usuário rola a página para baixo, proporcionando uma experiência fluida e contínua. No React, podemos implementar essa funcionalidade de forma eficiente utilizando o React Query, uma poderosa biblioteca para gerenciamento de estados e requisições assíncronas.

Neste tutorial, vamos explorar como implementar o Infinite Scrolling com React Query de forma prática e acessível. Vamos abordar desde a configuração inicial até a implementação completa, garantindo que você entenda cada passo do processo.

O que é o React Query?

O React Query é uma biblioteca que facilita o gerenciamento de estados assíncronos e a manipulação de dados em aplicações React. Ele fornece uma maneira simplificada de buscar, armazenar e atualizar dados de forma eficiente, permitindo que os desenvolvedores se concentrem na construção da interface do usuário.

Preparando o Ambiente

Para começar, você precisará ter um projeto React configurado. Se ainda não possui um, você pode criar um utilizando o Create React App:

npx create-react-app meu-projeto
cd meu-projeto

Após criar seu projeto, instale o React Query:

npm install @tanstack/react-query

Configurando o React Query

Agora que temos o React Query instalado, precisamos configurar o QueryClient e o QueryClientProvider. Isso permitirá que utilizemos os hooks do React Query em nossa aplicação.

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

No código acima, criamos uma instância do QueryClient e a passamos como um provider para o nosso componente App. Isso nos permite usar o React Query em toda a nossa aplicação.

Implementando o Infinite Scrolling

Agora vamos implementar a lógica do Infinite Scrolling. Para isso, vamos criar um componente que busca dados de uma API e os renderiza à medida que o usuário rola a página para baixo.

import React, { useEffect, useRef } from 'react';
import { useInfiniteQuery } from '@tanstack/react-query';

const fetchPosts = async ({ pageParam = 1 }) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_page/${pageParam}&_limit=10`);
  return res.json();
};

const InfiniteScroll = () => {
  const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery('posts', fetchPosts, {
    getNextPageParam: (lastPage, pages) => {
      return lastPage.length ? pages.length + 1 : undefined;
    },
  });

  const observer = useRef();
  const lastPostElementRef = useRef();

  useEffect(() => {
    const currentObserver = observer.current;
    if (currentObserver) currentObserver.disconnect();

    const callback = (entries) => {
      if (entries[0].isIntersecting && hasNextPage) {
        fetchNextPage();
      }
    };

    const options = { root: null, threshold: 1.0 };
    const newObserver = new IntersectionObserver(callback, options);

    if (lastPostElementRef.current) {
      newObserver.observe(lastPostElementRef.current);
    }

Observer.current = newObserver;
  }, [lastPostElementRef, hasNextPage, fetchNextPage]);

  return (
    <div>
      {data.pages.map((page) => (
        <div key={page.id}>
          {page.map((post) => (
            <div key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </div>
          ))}
        </div>
      ))}
      <div ref={lastPostElementRef} />
      {isFetching && <p>Loading...</p>}
    </div>
  );
};

export default InfiniteScroll;

Neste componente, usamos o hook useInfiniteQuery para buscar os dados da API. A função fetchPosts é responsável por fazer a requisição e retornar os dados. Utilizamos o IntersectionObserver para detectar quando o último post está visível na tela, acionando a função fetchNextPage para buscar mais dados quando necessário.

Conclusão

Com essas etapas, você implementou com sucesso o Infinite Scrolling em sua aplicação utilizando React Query. Essa técnica não apenas melhora a experiência do usuário, mas também otimiza o carregamento de dados, tornando sua aplicação mais responsiva e eficiente. Explore mais sobre o React Query e suas funcionalidades para aprimorar ainda mais suas aplicações React.

Entenda a Importância do Infinite Scrolling em Aplicações Modernas

O Infinite Scrolling é uma técnica amplamente utilizada em aplicações web modernas. Ela permite que os usuários acessem grandes quantidades de dados sem a necessidade de navegar por várias páginas, melhorando a usabilidade e a experiência geral. Com a implementação correta, é possível otimizar o desempenho da aplicação e proporcionar um fluxo contínuo de informações, essencial para plataformas que lidam com grandes volumes de dados. Neste artigo, abordamos a implementação do Infinite Scrolling utilizando o React Query, uma biblioteca poderosa que facilita o gerenciamento de estados assíncronos, tornando a construção de interfaces mais eficiente.

Algumas aplicações:

• Redes sociais que carregam posts continuamente.
• Sites de notícias que apresentam artigos sem limite de páginas.
• Plataformas de e-commerce que mostram produtos de forma dinâmica.

Dicas para quem está começando

• Comece com um projeto simples para entender a lógica do Infinite Scrolling.
• Estude a documentação do React Query para aproveitar ao máximo seus recursos.
• Teste a implementação em diferentes cenários para entender como gerenciar estados e requisições.
• Considere a acessibilidade ao implementar o Infinite Scrolling, garantindo que todos os usuários possam navegar facilmente.

Compartilhe este tutorial