Comment implémenter la pagination dans React en utilisant les hooks de React

Les applications web gèrent de grandes quantités de données. Par exemple, les applications de commerce électronique affichent des milliards de données d’une manière à la fois organisée et visuellement attrayante. Essentiellement, les données doivent être présentées de manière à ce que les utilisateurs puissent facilement les comprendre et y naviguer.

Cependant, l’affichage de toutes les données sur une seule page peut entraîner des problèmes de performance, des temps de chargement plus lents et une mauvaise expérience utilisateur. C’est pourquoi la mise en œuvre d’une logique de pagination peut considérablement atténuer ces problèmes.

Dans React, vous pouvez opter pour l’utilisation de composants préconstruits fournis par les bibliothèques de pagination, sinon, vous pouvez construire un système de pagination personnalisé à l’aide de crochets React.

Mise en œuvre de la pagination côté client

Il existe deux façons de mettre en œuvre la pagination dans les applications : la pagination côté client et la pagination côté serveur. Néanmoins, quel que soit le format choisi, le concept sous-jacent reste le même. La pagination côté client consiste à gérer la logique de pagination côté client, dans le navigateur de l’utilisateur.

Vous pouvez mettre en œuvre la pagination côté client à l’aide de différentes techniques. Ces techniques sont les suivantes

1. Pagination par page: Cette méthode consiste à diviser les données en morceaux ou pages de taille fixe, affichant généralement un certain nombre d’éléments par page. Les utilisateurs peuvent naviguer dans les pages à l’aide de liens ou de boutons de navigation, étiquetés avec des numéros de page ou des boutons « précédent » et « suivant ». Il s’agit d’une mise en œuvre populaire dans les moteurs de recherche et les applications de commerce électronique.
2. Défilement infini: Cette méthode implique le chargement et le rendu dynamiques de nouvelles données au fur et à mesure que l’utilisateur fait défiler la page, créant ainsi une expérience de navigation transparente et continue. Cette technique est particulièrement utile lorsqu’il s’agit de traiter de grands ensembles de données qui s’étendent continuellement, tels que les flux de médias sociaux.

Mise en œuvre d’une pagination basée sur la page à l’aide de crochets React

Pour commencer, créez un projet React. Vous pouvez soit utiliser la commande JavaScript create-react-app pour mettre en place une application React de base. localement ou utiliser Vite pour mettre en place un projet React sur votre machine.

Ce tutoriel a utilisé Vite, vous pouvez trouver le code de ce projet dans ce dépôt GitHub.

Après avoir configuré votre projet React, procédons à la mise en œuvre de la pagination basée sur les pages à l’aide de React Hooks.

Configuration de l’ensemble de données

Idéalement, vous devriez typiquement récupérer et afficher des données à partir d’une base de données. Cependant, pour ce tutoriel, vous récupérerez des données à partir d’un fichier fictif API JSONPlaceholder fictive.

En ce qui concerne les src créez un nouveau fichier composants/pagination et ajoutez le code suivant.

1. Créez un composant fonctionnel React et définissez les états suivants.
2. Mettez en œuvre la logique pour récupérer les données de l’API fictive. À l’intérieur de l’état Pagination ajoutez le code ci-dessous. Le code ci-dessus a deux objectifs principaux. Premièrement, une fois le composant monté, le composant useEffect se déclenche pour récupérer les données du point de terminaison de l’API externe, qui sont ensuite converties au format JSON. Les données JSON résultantes sont ensuite utilisées pour mettre à jour le composant données avec les données de to-dos récupérées. Ensuite, la variable d’état displayData prend les données récupérées comme argument et les affiche sous forme de liste non ordonnée de to-dos.
3. Dans le segment de retour de la fonction Pagination inclure l’élément displayData pour afficher les données recherchées dans le navigateur. Voici une version actualisée du code : En appelant la fonction displayData(data) dans l’élément JSX et en passant l’élément data en tant que paramètre, la fonction rendra les données extraites sous forme de liste non ordonnée dans le navigateur.

Dans ce cas particulier, la liste rendue se compose de deux cents tâches. Cependant, dans le monde réel, les applications gèrent de grandes quantités de données. L’affichage de toutes ces données sur une seule page web peut entraîner des problèmes de performance, tels que des temps de chargement lents et une mauvaise performance générale de l’application.

Pour remédier à ce problème, il conviendrait d’intégrer une fonctionnalité de pagination afin que chaque page contienne un nombre limité d’éléments auxquels les utilisateurs peuvent accéder séparément à l’aide des boutons de navigation.

Cette approche permet aux utilisateurs de naviguer dans les données d’une manière plus gérable et mieux organisée, ce qui améliore les performances globales et l’expérience utilisateur de l’application.

Mise en œuvre de la logique de pagination pour l’affichage d’un nombre limité d’éléments par page

Pour déterminer quels éléments à faire seront affichés sur chaque page, nous devons mettre en œuvre la logique nécessaire. Cependant, avant de procéder, il est essentiel de déterminer le nombre total de pages nécessaires en fonction des tâches disponibles.

Pour ce faire, vous pouvez ajouter le code suivant au fichier Pagination de Pagination :

L’extrait de code ci-dessus parcourt le composant données et calcule le nombre total de pages nécessaires en divisant la longueur du tableau par la longueur du tableau . données par le nombre désiré d’éléments par page – le nombre initial d’éléments par page est fixé à cinq dans le tableau itemsPerPage .

Néanmoins, vous pouvez mettre à jour ce nombre si nécessaire pour tester la logique. Enfin, chaque numéro de page est ensuite ajouté à l’état pages au tableau pages . Mettons maintenant en œuvre la logique d’affichage d’un certain nombre d’éléments par page.

Ce code détermine les tâches à afficher sur la page du navigateur en fonction des éléments suivants la page en cours et itemsPerPage Il extrait les index correspondants pour l’ensemble des to-dos du tableau de données à l’aide de la méthode de découpage en tranches. Les index sont ensuite utilisés pour extraire les to-dos spécifiques qui appartiennent à la page souhaitée.

Maintenant, pour afficher les to-dos, mettez à jour l’élément displayData en lui passant la fonction pageItems comme paramètre. Voici une version mise à jour du code :

En effectuant cette mise à jour, l’élément displayData rendra un nombre limité d’éléments de tâches de manière appropriée, reflétant la page en cours.

Rationalisation de l’accès aux pages et de la navigation grâce aux boutons de navigation

Pour que les utilisateurs puissent facilement naviguer et accéder au contenu des différentes pages, vous devez ajouter des boutons « précédent » et « suivant », ainsi que des boutons indiquant les numéros de page spécifiques.

Tout d’abord, implémentons la logique des boutons de numéro de page. Dans l’élément Pagination ajoutez le code ci-dessous.

Le composant handleClick se déclenche lorsqu’un utilisateur clique sur un bouton de numéro de page. Cette action met alors à jour le fichier page actuelle avec le numéro de page sélectionné.

La variable d’état currentPage avec le numéro de page sélectionné.renderPageNumbers utilise la variable carte pour itérer sur les variables pages et génère dynamiquement des éléments de liste représentant chaque numéro de page. Elle applique une logique conditionnelle pour déterminer les numéros de page à afficher en fonction des limites maximales et minimales définies pour les numéros de page.

Enfin, ajoutez le code pour les boutons suivant et précédent.

Pour rendre les boutons de navigation, mettez à jour les éléments JSX comme suit :

Une fois le composant rendu, il affichera les numéros de page, les boutons précédent et suivant, ainsi que les éléments de données correspondants pour la page en cours.

Choix entre les bibliothèques de pagination et les systèmes de pagination personnalisés

Lorsqu’il s’agit de décider entre l’utilisation de bibliothèques de pagination et la construction d’un système de pagination personnalisé, le choix dépend de plusieurs facteurs. Les bibliothèques de pagination, telles que react-paginate, fournissent des composants et des fonctionnalités préconstruits, ce qui permet une mise en œuvre rapide et simple.

D’un autre côté, la construction d’un système de pagination personnalisé à l’aide de crochets React offre plus de flexibilité et de contrôle sur la logique de pagination et l’interface utilisateur. La décision dépendra en fin de compte de vos besoins et préférences spécifiques.