React Fragments کیا ہیں اور انہیں کیوں استعمال کریں؟

Question

Accepted Answer

ایک جزو کو **ایک ہی جڑ عنصر** واپس کرنا چاہیے، لیکن اکثر آپ اس قاعدے کو پورا کرنے کے لیے صرف اضافی `

` wrapper شامل نہیں کرنا چاہتے (یہ CSS layouts جیسے flexbox/grid یا HTML structures جیسے tables کو توڑ سکتا ہے)۔ **Fragment** بچوں کو **بغیر کسی** DOM node کے گروپ کرتا ہے۔ ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` اگر آپ یہاں `

` استعمال کرتے تو آپ کو غلط HTML (`

…`) ملتا، اور ٹیبل ٹوٹ جاتا۔ Fragment صرف دونوں ``s کو render کرتا ہے۔ ## مختصر syntax بمقابلہ مکمل syntax ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` جب **fragments کی فہرست** render کریں تو مکمل شکل استعمال کریں، کیونکہ مختصر `<>` `key` نہیں لے سکتا: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## یہ کیوں اہم ہے Fragments DOM کو صاف رکھتے ہیں (کوئی "wrapper div soup" نہیں)، semantic/layout-حساس structures کو ٹوٹنے سے بچاتے ہیں، اور node count کو تھوڑا کم کرتے ہیں — یہ سب صفر runtime cost کے ساتھ۔