React developer হিসেবেই আমরা প্রায়ই elements group করার জন্য div
ব্যবহার করি। কিন্তু, কখনো কি Fragment
ব্যবহার করার কথা ভেবেছেন?
Fragment
ব্যবহার করা কেন often better choice, চলুন দেখে নিই:
1. Unnecessary DOM Elements Avoid করা যায়
একটা div
DOM-এ extra node create করে, যা CSS grid বা flexbox-এর মতো layout গুলোকে affect করতে পারে। কিন্তু, Fragment
একদম invisible wrapper এর মতো কাজ করে, DOM clean রাখতে সাহায্য করে।
2. Performance Improve করে
Cleaner DOM মানেই better performance. প্রতিটা extra node DOM-এ overhead বাড়ায়। Fragment
ব্যবহার করলে unnecessary nodes কমে যায়, rendering speed enhance হয়।
3. Cleaner & More Semantic Markup
Fragment
ব্যবহার করলে components গুলো cleaner থাকে এবং DOM-এ extra elements add হয় না। এটা specially important, যখন complex layouts বা third-party libraries এর সাথে কাজ করতে হয়।
4. CSS এবং Layout Compatibility Better
Extra div
দিলে flex বা grid layout গুলোতে problem হতে পারে। Fragment
DOM structure intact রাখে, যাতে CSS expected মতো কাজ করে।
example:
// With div
<div>
<h1>Title</h1>
<p>Paragraph</p>
</div>
// With Fragment
<>
<h1>Title</h1>
<p>Paragraph</p>
</>
Takeaway: Grouping elements করার জন্য, extra nodes add না করে Fragment
is the way to go! Let’s keep our DOM lean এবং components clean!