Que sont les React Fragments et pourquoi les utiliser ?

Question

IT Interview Practice · Accepted Answer

Un composant doit retourner **un seul élément racine**, mais vous ne voulez souvent pas ajouter simplement un wrapper `

` 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. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` Si vous utilisiez une `

` ici à la place, vous obtiendriez du HTML invalide (`

…`)، et le tableau se casserait. Le Fragment rend seulement les deux ``. ## Syntaxe courte ou complète ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Utilisez la forme complète lors du rendu d'une **liste de fragments**, car la forme courte `<>` ne peut pas prendre une `key` : ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## 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.

Syntaxe courte ou complète

Pourquoi c'est important

Questions connexes