Comprendre les 'Fragments' dans React

Les 'Fragments' dans React sont des composants qui retournent plusieurs éléments. Ils permettent de regrouper une liste d'éléments enfants sans ajouter de nœuds supplémentaires au DOM (Document Object Model).

En React, chaque composant doit retourner un element unique. Cependant, il y a des situations où vous pourriez vouloir retourner plusieurs éléments. Auparavant, cela nécessitait l'enveloppement des éléments dans un div ou autre élément DOM, ce qui ajoute inutilement à la structure du DOM. Les fragments de React sont une solution à ce problème.

Par exemple, considérez le code suivant sans l'utilisation de fragments :

class Demo extends React.Component {
  render() {
    return (
      <div>
        <ChildA />
        <ChildB />
        <ChildC />
      </div>
    );
  }
}

Ici, même si les composants ChildA, ChildB et ChildC pourraient ne pas avoir besoin d'un parent div pour des raisons logiques, nous avons été obligés de l'ajouter pour rendre le code valide.

Maintenant, voici comment on peut utiliser les fragments pour éliminer l'enveloppement inutile :

class Demo extends React.Component {
  render() {
    return (
      <React.Fragment>
        <ChildA />
        <ChildB />
        <ChildC />
      </React.Fragment>
    );
  }
}

Ou en utilisant la syntaxe courte de fragments :

class Demo extends React.Component {
  render() {
    return (
      <>
        <ChildA />
        <ChildB />
        <ChildC />
      </>
    );
  }
}

Dans ces exemples, les fragments permettent au composant Demo de retourner plusieurs éléments Child sans la nécessité d'un parent div. Cela résulte en un DOM plus propre et plus léger qui améliore les performances de l'application.

Les fragments de React sont ainsi un outil précieux pour garder votre code propre, organisé et efficient.