Τι είναι τα React Fragments και γιατί τα χρησιμοποιούμε;

Question

Accepted Answer

Ένα component πρέπει να επιστρέψει **ένα μόνο ρίζα στοιχείο**, αλλά συχνά δεν θέλεις να προσθέσεις απλώς ένα επιπλέον wrapper `

` μόνο για να ικανοποιήσεις αυτόν τον κανόνα (μπορεί να σπάσει τις διατάξεις CSS όπως flexbox/grid ή τις δομές HTML όπως πίνακες). Ένα **Fragment** ομαδοποιεί τα παιδιά **χωρίς** να προσθέτει κανένα κόμβο DOM. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` Αν χρησιμοποιούσες ένα `

` εδώ στη θέση του, θα έπαιρνες μη έγκυρο HTML (`

…`)، και ο πίνακας θα σπάσει. Το Fragment αποδίδει μόνο τα δύο ``. ## Σύντομη έναντι πλήρης σύνταξης ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Χρησιμοποίησε την πλήρη μορφή κατά την απόδοση ενός **καταλόγου fragments**, αφού η σύντομη `<>` δεν μπορεί να πάρει ένα `key`: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## Γιατί έχει σημασία Τα Fragments διατηρούν το DOM καθαρό (χωρίς "wrapper div soup"), αποφεύγουν την θραύση σημασιολογικών/ευαίσθητων διατάξεων και μειώνουν ελαφρώς τον αριθμό των κόμβων — όλα με μηδενικό κόστος runtime.