Le Windowing en React : Optimiser les performances de sont application

Bienvenue dans la guilde ! 👋

Le windowing, ou virtualisation de liste, consiste à n’afficher que les éléments visibles à l’écran, au lieu de rendre toute la liste dans le DOM.

Concrètement, même si votre liste contient 10 000 éléments, le DOM n’en affichera qu’une vingtaine, correspondant à la fenêtre visible de l’utilisateur.

Cela permet d’optimiser :

• les performances de rendu,
• la consommation mémoire

Deux bibliothèques se démarquent :

• react-window : Léger, rapide, simple à prendre en main
• react-virtualized : Plus complet (grilles, tables), mais plus lourd

Dans cet article, on choisit react-window pour sa simplicité, idéale pour la majorité des cas d’usage courants.

Cas pratique

Imaginez que vous développez une application SaaS pour une entreprise. On vous demande d’implémenter un module de messagerie interne, les messages doivent s'afficher dans une zone scrollable. Certains canaux contiennent des milliers de messages.

Une pagination serait contre-productive ici.
On attend un scroll fluide, naturel, comme sur WhatsApp ou Slack.

l’approche naïve : map

L'approche la plus naïve serait d'afficher tous nos message avec notre bon vieux map

1const messages = Array.from({ length: 10000 }, (_, i) => ({
2  id: i,
3  text: `Message n°${i}`
4}));
5
6export default function MessageList() {
7  return (
8    <div className="w-[500px] h-[500px] overflow-y-scroll mt-20">
9      <h2 className="text-center font-bold mb-2">Sans windowing</h2>
10      {messages.map(msg => (
11        <div key={msg.id} className="bg-violet-100 p-2 m-1 rounded-sm">
12          {msg.text}
13        </div>
14      ))}
15    </div>
16  );
17}

En prenant cette approche, nous allons faire face à 03 problème mageurs :

• Temps de chargement élevé
• DOM saturé
• Scroll peu fluide

Voici une analyse des performance de notre application réalisée avec l'extension lighthouse (google chrome) au chargement de la page :

l’approche optimisée avec react-window

Nous devons tout d'abord installler la librerie react-window:

1npm install react-window

Maintenant, nous pourvons passer à l'implémentation :

1import { FixedSizeList as List } from "react-window";
2
3const messages = Array.from({ length: 10000 }, (_, i) => ({
4  id: i,
5  text: `Message n°${i}`
6}));
7
8export default function VirtualizedMessageList() {
9  const Row = ({ index, style }) => (
10    <div style={style}>
11      <div className="bg-violet-100 p-2 m-1 rounded-sm">
12        {messages[index].text}
13      </div>
14    </div>
15  );
16
17  return (
18    <div className="w-[500px] h-[500px] mt-20">
19      <h2 className="text-center font-bold mb-2">Avec react-window</h2>
20      <List
21        height={500}
22        itemCount={messages.length}
23        itemSize={50}
24        width={500}
25      >
26        {Row}
27      </List>
28    </div>
29  );
30}

Grace à cette approche, nous avons plusieur avantages :

• DOM allégé (seulement ~10 éléments affichés)
• Scroll fluide
• Expérience utilisateur optimale

Voice de résultat de l'analyse des performances de notre site réalisée avec l'extension lighthouse (google chrome) au chargement de la page :

Quand utiliser le windowing ?

Utilisez le windowing si :

• Vous affichez des millier d’éléments ou plus
• Le scroll est préféré à la pagination
• Vous cherchez à optimiser le temps de rendu

Cas typiques :

• Fils de discussion (chat, forums)
• Journaux d’événements (logs)
• Catalogues de produits
• Interfaces d’admin volumineuses

Le windowing est une technique indispensable dès que vous affichez des listes longues dans React. Elle permet de maintenir l’application réactive, rapide et agréable à utiliser.

N'hésitez pas à revenir dans la guilde pour en apprendre plus 😉 !