Wat is React-fragment?

Een React-fragment is een veelvoorkomend patroon in React voor een component dat meerdere elementen moet retourneren. Fragmenten laten je een lijst met kinderen groeperen zonder dat je extra knooppunten aan de DOM hoeft toe te voegen.

Voorheen als je meerdere elementen in een render() methode wilde returnen, moest je ze wrappen in een overbodige div of andere DOM-element. Dit kan problemen veroorzaken in de lay-out van je applicatie of met CSS. Met React Fragments kun je dit omzeilen.

Een fragment wordt gedefinieerd met behulp van de tags, of in een kortere syntax gewoon <> en . Fragmenten zijn als ‘onzichtbare wrappers’ voor je componenten. Ze groeperen de kinderen zonder extra knooppunt aan de DOM toe te voegen.

Dus door het gebruik van Fragmenten kan je meerdere JSX-elementen samenvoegen en teruggeven zonder een extra knooppunt aan de DOM toe te voegen.