একটি কম্পোনেন্ট অবশ্যই একটি একক রুট এলিমেন্ট রিটার্ন করতে হবে, তবে প্রায়শই আপনি শুধুমাত্র সেই নিয়মটি পূরণ করার জন্য একটি অতিরিক্ত wrapper <div> যোগ করতে চান না (এটি CSS লেআউট যেমন flexbox/grid বা HTML স্ট্রাকচার যেমন টেবিলগুলি ভেঙে ফেলতে পারে)। একটি Fragment চিলড্রেন কে কোনো DOM নোড যোগ না করে গ্রুপ করে।
() {
(
);
}
যদি আপনি এখানে <div> ব্যবহার করেন তবে আপনি অবৈধ HTML পাবেন (<tr><div><td>…)، এবং টেবিলটি ভেঙে যাবে। Fragment শুধুমাত্র দুটি <td> রেন্ডার করে।
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
ফ্রাগমেন্টের একটি তালিকা রেন্ডার করার সময় সম্পূর্ণ ফর্মটি ব্যবহার করুন, কারণ সংক্ষিপ্ত <> কোনো key নিতে পারে না:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments DOM কে পরিষ্কার রাখে (কোনো "wrapper div soup" নেই), সিমান্টিক/লেআউট-সংবেদনশীল স্ট্রাকচার ভাঙা এড়ায়, এবং নোড সংখ্যা সামান্য কমায় — সবকিছু শূন্য runtime খরচে।