Moins de Div, Plus d’Efficacité

Par kaugustin, 14 mars, 2025
React

Bonjour à tous et bienvenue dans ce sixième article sur React.js! Aujourd’hui, nous allons voire c’est quoi les fragments dans react, comment on les utilise et pourquoi on les utilise.

Qu'est-ce qu'un Fragment en React ?

Un Fragment est un composant spécial de React qui permet d'englober plusieurs éléments JSX sans ajouter de nœud supplémentaire au DOM. En d'autres termes, au lieu d'utiliser une div inutilement, on peut utiliser un Fragment pour éviter une structure HTML inutile.

Pourquoi utiliser les Fragments ?

  1. Éviter les div inutiles dans le DOM

Dans les anciennes versions de React, si on voulait retourner plusieurs éléments, on devait les envelopper dans une div :

function ListeElements() {
  return (
    <div>
      <p>Élément 1</p>
      <p>Élément 2</p>
    </div>
  );
}

Cela fonctionne bien, mais cela ajoute une div inutile dans le DOM, ce qui peut perturber le CSS et la mise en page.

Avec un Fragment, on peut éviter cela :

import { Fragment } from 'react';

function ListeElements() {
  return (
    <Fragment>
      <p>Élément 1</p>
      <p>Élément 2</p>
    </Fragment>
  );
}
  1. Meilleure performance Les Fragments évitent d’ajouter des éléments inutiles dans le DOM, ce qui peut améliorer légèrement les performances d'affichage.

Comment utiliser les Fragments ?

L'utilisation des Fragments est simple et se fait de deux manières :

  1. Utilisation avec <Fragment> Il faut importer Fragment depuis React :
import { Fragment } from 'react';

function Exemple() {
  return (
    <Fragment>
      <h1>Titre</h1>
      <p>Contenu du paragraphe.</p>
    </Fragment>
  );
}
  1. Utilisation avec la syntaxe raccourcie <>...</> React permet une syntaxe plus concise :
function Exemple() {
  return (
    <>
      <h1>Titre</h1>
      <p>Contenu du paragraphe.</p>
    </>
  );
}

Cette syntaxe est plus rapide à écrire et plus lisible, mais elle ne permet pas d'ajouter des propriétés au Fragment.Si vous devez ajouter une key ou un autre attribut, vous devez utiliser 

function ListeAvecAttributs() {
  return (
    <>
      <Fragment key="1">
        <h2>Élément 1</h2>
        <p>Contenu du premier élément</p>
      </Fragment>
      <Fragment key="2">
        <h2>Élément 2</h2>
        <p>Contenu du second élément</p>
      </Fragment>
    </>
  );
}

Pour finir, Les Fragments en React sont une solution simple et efficace pour structurer son code sans ajouter de nœuds inutiles dans le DOM. Ils permettent d'améliorer la lisibilité du code, d'éviter des div redondants et d'optimiser les performances d'affichage. Grâce à la syntaxe raccourcie <>...</>, leur utilisation est encore plus pratique, bien que l’option <Fragment> reste nécessaire lorsqu’il faut ajouter des attributs comme une key.En adoptant cette approche, vous facilitez la gestion de vos composants et améliorez la maintenabilité de votre projet. Sur ce, je vous dis à la semaine prochaine!

Références:

Meta. (s.d.). Fragment – React. React Documentation. https://react.dev/reference/react/Fragment

Refine. (2023, 4 juillet). How React fragments work: What, why, and how? Refine Blog. https://refine.dev/blog/how-react-fragments-is-works/

Memberstack. (2022, 15 septembre). React fragment: What is it and why should you use it? Memberstack Blog. https://www.memberstack.com/blog/react-fragment

Étiquettes

Commentaires