Comprendre le Défilement Infini dans React
Avez-vous déjà navigué sur une page web ou utilisé une application où le contenu se chargeait dynamiquement lorsque vous atteigniez le bas de la page ? C’est ce qu’on appelle le défilement infini, une technique devenue très populaire.
Le défilement infini facilite la gestion de grandes quantités d’informations en continu. Il améliore l’expérience utilisateur, particulièrement sur les appareils mobiles, en offrant une navigation plus fluide et ininterrompue.
Dans React, plusieurs approches permettent d’intégrer cette fonctionnalité. On peut utiliser une bibliothèque tierce comme ‘react-infinite-scroll-component’. Cette bibliothèque émet un événement lorsque l’utilisateur atteint la fin de la liste, signal que vous pouvez utiliser pour charger de nouveaux éléments.
Une autre méthode consiste à utiliser les fonctionnalités natives de React. Par exemple, la méthode ‘componentDidMount’, déclenchée après le premier rendu du composant, permet de charger la première portion de données.
Ensuite, ‘componentDidUpdate’, appelée après chaque mise à jour du composant, peut être utilisée pour charger les données suivantes en fonction du défilement de l’utilisateur.
Enfin, les hooks de React offrent également une solution élégante pour implémenter le défilement infini.
Voici quelques manières d’exploiter le composant ‘react-infinite-scroll-component’.
Installation du Composant React-Infinite-Scroll
Pour débuter, vous devez installer le composant via npm :
npm install react-infinite-scroll-component --save
Importer le Composant dans React
Après l’installation, il faut importer la bibliothèque dans votre composant 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>Défilement Infini</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Chargement...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>C'est tout ! Vous avez vu tous les éléments.</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Ce code commence par l’importation de React et du composant InfiniteScroll. Il définit ensuite un composant avec un état initial vide et une variable ‘hasMore’ initialisée à ‘true’.
Configuration des Paramètres
Dans la méthode ‘componentDidMount’, on appelle la méthode ‘fetchData’ avec un paramètre ‘page’ initialisé à 1. ‘fetchData’ est responsable de la récupération de données. Dans cet exemple, pour des fins de démonstration, nous générons des données factices et créons un tableau de 100 éléments.
Lorsque le paramètre ‘page’ atteint 100, nous mettons l’indicateur ‘hasMore’ à ‘false’ pour bloquer les appels API supplémentaires, car il n’y a plus d’éléments à charger. Enfin, l’état est mis à jour avec les nouvelles données.
La méthode ‘render’ utilise le composant ‘InfiniteScroll’ et lui transmet plusieurs props. La prop ‘dataLength’ est définie à partir de la longueur du tableau d’éléments. La prop ‘next’ est définie sur la méthode ‘fetchData’. La prop ‘hasMore’ est liée à la valeur de l’indicateur ‘hasMore’.
La prop ‘loader’ permet d’afficher un message de chargement et ‘endMessage’ s’affiche lorsqu’il n’y a plus de données à charger.
Vous pouvez transmettre d’autres props au composant ‘InfiniteScroll’, mais celles-ci sont les plus courantes.
Utilisation des Fonctions Intégrées
React met également à disposition des méthodes intégrées pour implémenter le défilement infini.
La première, ‘componentDidUpdate’, est exécutée après une mise à jour du composant. Vous pouvez y vérifier si l’utilisateur a atteint le bas de la page et charger de nouvelles données si c’est le cas.
La deuxième, l’événement ‘scroll’, est déclenchée lors du défilement. Vous pouvez l’utiliser pour suivre la position du défilement et charger de nouvelles données lorsque l’utilisateur arrive en bas de la page.
Voici un exemple qui illustre l’utilisation de ces méthodes pour le défilement infini :
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 Ce code utilise les hooks ‘useState’ et ‘useEffect’ pour gérer l’état et les effets secondaires.
Le hook ‘useEffect’ appelle la méthode ‘fetchData’ avec la page actuelle. Cette méthode récupère des données (ici, nous simulons une requête en générant des données factices).
La boucle ‘for’ remplit le tableau ‘newItems’ avec 100 entiers. Si le paramètre ‘page’ atteint 100, l’indicateur ‘hasMore’ est mis à ‘false’ pour arrêter les appels supplémentaires.
Enfin, l’état est mis à jour avec les nouvelles données.
La méthode ‘onScroll’ suit la position de défilement. Si l’utilisateur atteint le bas de la page, nous incrémentons le numéro de page afin de charger plus de données.
Le hook ‘useEffect’ ajoute un écouteur d’événement sur ‘scroll’. Lorsque l’événement ‘scroll’ se déclenche, la méthode ‘onScroll’ est appelée.
Le défilement infini dans React a ses avantages et ses inconvénients. Il améliore l’expérience utilisateur avec une navigation plus fluide, surtout sur les appareils mobiles. Cependant, il peut arriver que les utilisateurs manquent du contenu s’ils ne défilent pas suffisamment. Il est crucial de peser ces aspects avant de l’intégrer à votre site ou application.
L’ajout du défilement infini à votre application React.js peut améliorer l’expérience utilisateur. Les utilisateurs n’ont plus besoin de cliquer pour voir plus de contenu. Cela peut également réduire le nombre de chargements de pages et améliorer les performances.
Vous pouvez aussi déployer facilement votre application React sur Github Pages.