React Fragments શું છે અને તમે તેનો ઉપયોગ શા માટે કરો છો?

Question

Accepted Answer

એક component એક **single root element** પરત કરવો જોઈએ, પરંતુ તમે ઘણીવાર તે નિયમને સંતોષવા માટે માત્ર એક વધારાનું `

` wrapper ઉમેરવા માંગતા નથી (તે CSS layouts જેમ કે fl/grid અથવા HTML structures જેમ કે tables તોડી શકે છે). એક **Fragment** children ને **વગર** કોઈ DOM node ઉમેર્યા group કરે છે. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` જો તમે અહીં `

` નો ઉપયોગ કરતા, તો તમને invalid HTML (`

…`) મળત, અને table તોડી જાત. Fragment માત્ર બે ``s render કરે છે. ## Short vs full syntax ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Full form નો ઉપયોગ કરો જ્યારે **fragments ની list** render કર્યા કરો, કારણ કે short `<>` `key` લઈ શકતું નથી: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## શા માટે તે મહત્વપૂર્ણ છે Fragments DOM ને સાફ રાખે છે (કોઈ "wrapper div soup" નહીં), semantic/layout-sensitive structures તોડવાથી બચાવે છે, અને node count ને થોડું ઘટાડે છે — બધું zero runtime cost સાથે.