Como implementar paginação no React usando React Hooks

Aumente a eficiência do seu aplicativo integrando o sistema de paginação baseado em página ao React.

Os aplicativos da Web gerenciam grandes quantidades de dados. Por exemplo, os aplicativos de comércio eletrônico exibem bilhões de dados de uma forma organizada e visualmente atraente. Essencialmente, os dados precisam ser apresentados de uma maneira que seja fácil para os usuários entenderem e navegarem.

No entanto, renderizar todos os dados em uma única página pode levar a problemas de desempenho, tempos de carregamento mais lentos e experiências ruins do usuário. Por esse motivo, a implementação da lógica de paginação pode aliviar significativamente esses problemas.

No React, você pode optar por utilizar componentes pré-construídos fornecidos por bibliotecas de paginação; alternativamente, você pode construir um sistema de paginação personalizado usando ganchos React.

Existem duas maneiras de implementar a paginação em aplicativos: paginação do lado do cliente e paginação do lado do servidor. No entanto, independentemente do formato escolhido, o conceito subjacente permanece o mesmo. A paginação do lado do cliente envolve lidar com a lógica de paginação no lado do cliente, no navegador do usuário.

Você pode implementar a paginação do lado do cliente usando várias técnicas. Essas técnicas incluem:

Para começar, crie um projeto React. Você pode usar o comando JavaScript create-react-app para configurar um aplicativo React básicolocalmente ou utilize o Vite para criar um projeto React em sua máquina.

Este tutorial utilizou o Vite, você pode encontrar o código deste projeto neste repositório GitHub.

Depois de configurar seu projeto React, vamos prosseguir com a implementação da paginação baseada em páginas usando React Hooks.

Idealmente, você normalmente buscaria e exibiria dados de um banco de dados. No entanto, para este tutorial, você buscará dados de uma API JSONPlaceholder fictícia.

Nofontediretório, crie um novocomponentes/paginaçãoarquivo e adicione o seguinte código.

Neste caso específico, a lista renderizada consiste em duzentas tarefas. No entanto, em cenários reais, os aplicativos gerenciarão grandes quantidades de dados. Exibir todos esses dados em uma única página da Web pode resultar em problemas de desempenho, como tempos de carregamento lentos e baixo desempenho geral do aplicativo.

Para resolver isso, seria adequado incorporar a funcionalidade de paginação para garantir que cada página contenha um número limitado de itens que os usuários possam acessar separadamente usando os botões de navegação.

Essa abordagem permite que os usuários naveguem pelos dados de maneira mais gerenciável e organizada, melhorando o desempenho geral e a experiência do usuário do aplicativo.

Para determinar quais itens de tarefas serão renderizados em cada página, precisamos implementar a lógica necessária. No entanto, antes de prosseguir, é essencial determinar o número total de páginas necessárias com base nas tarefas disponíveis.

Para conseguir isso, você pode adicionar o seguinte código aoPaginaçãocomponente:

O trecho de código acima percorre odadosarray, calculando o número total de páginas necessárias dividindo o comprimento dodadosmatriz pelo número desejado de itens por página — o número inicial de itens por página é definido como cinco noitens por páginaestado.

No entanto, você pode atualizar esse número conforme necessário para testar a lógica. Por último, cada número de página é adicionado aoPáginas variedade. Agora, vamos implementar a lógica para exibir vários itens por página.

Este código determina as tarefas a serem renderizadas na página do navegador com base empagina atualeitens por página variáveis ​​– extrai os índices correspondentes para o conjunto de tarefas da matriz de dados usando o método slice. Os índices são então usados ​​para recuperar as tarefas específicas que pertencem à página desejada.

Agora, para exibir as tarefas, atualize omostrar dadosfunção passando oitens de página como parâmetro. Aqui está uma versão atualizada do código: