Que sont les React Fragments et pourquoi les utiliser ?

Un composant doit retourner un seul élément racine, mais vous ne voulez souvent pas ajouter simplement un wrapper <div> supplémentaire juste pour respecter cette règle (cela peut casser les mises en page CSS comme flexbox/grid ou les structures HTML comme les tableaux). Un Fragment groupe les enfants sans ajouter aucun nœud DOM.

function TableRow() {
  return (
    <>            {/* Fragment — produces NO extra element in the DOM */}
      <td>Name</td>
      <td>Email</td>
    </>
  );
}

Si vous utilisiez une <div> ici à la place, vous obtiendriez du HTML invalide (<tr><div><td>…)، et le tableau se casserait. Le Fragment rend seulement les deux <td>.

Syntaxe courte ou complète

<>...</>                       // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
  ...
</React.Fragment>

Utilisez la forme complète lors du rendu d'une liste de fragments, car la forme courte <> ne peut pas prendre une key :

{items.map(item => (
  <React.Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.def}</dd>
  </React.Fragment>
))}

Pourquoi c'est important

Les Fragments gardent le DOM propre (pas de "soupe de wrapper div"), évitent de casser les structures sensibles à la sémantique/mise en page, et réduisent légèrement le nombre de nœuds — tout cela sans aucun coût d'exécution.