En tant que développeurs React, nous avons tous rencontré des scénarios dans lesquels nous devons restituer des listes de données. Bien que la méthode .map() fonctionne bien, répéter la même logique à chaque fois que vous affichez une liste peut devenir épuisant et conduire à une duplication de code. Heureusement, il existe un moyen plus propre et évolutif de gérer cela, en utilisant un composant réutilisable, un composant d'ordre supérieur ou un hook personnalisé.

Dans cet article, je partagerai une approche pour améliorer le rendu des listes dans React, garantissant que votre code reste SEC, réutilisable et plus facile à maintenir.

Problème principal : logique .map() répétitive

Imaginez que vous créez un tableau de bord pour une application de commerce électronique. Le tableau de bord comprend plusieurs listes : commandes récentes, produits les plus vendus, commentaires des utilisateurs, etc. Vous devez restituer chaque liste à l'aide d'une fonction .map(). Voici un exemple typique :

const orders = [...]; // Array of order data

return (
  
    {orders.map((order, index) => (
      
    ))}
  >
);

Maintenant, vous pouvez voir la répétition de la logique .map() pour chaque liste, encombrant votre composant avec un code similaire. Voici où les modèles réutilisables peuvent être utiles.

Solution : un composant de liste réutilisable

Pour éviter de dupliquer la logique .map(), nous pouvons créer un ListComponent réutilisable qui résume la logique de mappage et nous permet de restituer différents composants en fonction des données.

function ListComponent({ data, renderItem }) {
  return (
    
      {data.map((item, index) => renderItem(item, index))}
    >
  );
}

Usage:

 (
    
  )} 
/>

Dans ce modèle :
renderItem : une fonction qui définit comment chaque élément doit être rendu

En passant une fonction renderItem différente, nous pouvons réutiliser ListComponent pour n'importe quelle liste. Il en résulte un composant propre et réutilisable, réduisant la logique répétitive .map().

Plus de flexibilité : composant d'ordre supérieur (HOC)

Si plusieurs composants nécessitent un rendu de liste, allons plus loin dans ce modèle en créant un composant HigherOrder. Un HOC permet d'améliorer n'importe quel composant avec des fonctionnalités supplémentaires — dans ce cas, le rendu de liste.

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) => (
          
        ))}
      >
    );
  };
}

Usage:

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array

En encapsulant OrderComponent avec le withListRendering HOC, nous avons automatiquement ajouté un comportement de rendu de liste sans modifier le composant d'origine. Ce modèle maintient le code modulaire.

Pour les amateurs de hook : hook personnalisé pour le rendu de liste

Les hooks React offrent un moyen fonctionnel d'encapsuler la logique. Si vous préférez utiliser des hooks, voici un exemple de rendu de liste avec un hook personnalisé.

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

Usage:

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    
  ));

  return {orderList}>;
}

Cette approche déplace la logique .map() dans le hook, en gardant la logique de rendu séparée de la structure du composant. C'est une autre façon de garder les composants épurés et concentrés sur la présentation.

Scénario du monde réel : un tableau de bord du commerce électronique

Appliquons ce modèle à un scénario du monde réel. Imaginez que vous créez un tableau de bord d'administration de commerce électronique dans lequel plusieurs listes de commandes, de produits, d'avis, etc. doivent être affichées.

En utilisant l'approche ListComponent, vous pouvez afficher une liste de commandes comme celle-ci :

 (
    
  )} 
/>

Lorsque nous devons restituer une liste différente, telle qu'un produit, le même ListComponent peut être réutilisé avec une fonction renderItem différente :

 (
    
  )} 
/>

Pas besoin de réécrire la logique .map() — il suffit de réutiliser le ListComponent avec différentes données et composants. Cela rend la base de code plus maintenable à mesure qu'elle grandit.

Conclusion : Code propre, réutilisable et évolutif

Le modèle réutilisable ListComponent simplifie le rendu de la liste React en faisant abstraction de la logique répétitive .map(). Que vous préfériez utiliser l'approche des composants de base, HOC ou un hook personnalisé, ce modèle garantit que le code est propre et réutilisable.

En créant un composant React avec plusieurs listes, envisagez d'utiliser l'un de ces modèles pour garder les composants concentrés sur la présentation tout en séparant la logique de liste à l'extérieur.

Quels autres modèles réutilisables avez-vous trouvés utiles dans React ? Faites-le moi savoir dans les commentaires ! et enfin merci d'avoir lu