We all use
whenever we work in HTML to make containers 📦 or wrap elements in one element.
We use
to return multiple components wrapped into a div so we can group them.
In most cases, that div is unnecessary and takes extra space in the DOM.
But in React 16.2, React introduces the 'Fragment' feature 🆕.
React Fragment works exactly like a div, you can wrap or group multiple elements with Fragments:
or with the shorthand (<>):
There are advantages to using Fragments:
1️⃣ It is fast: the div element creates a node in DOM and occupies some space 💾 but React Fragments never creates any node in DOM and never occupies any space ❌💾.
2️⃣ It is a more Readable DOM 👓: having lots of nested div makes the DOM large and hard to read and debug, but with Fragments, it gets cleaner 👍.
#react #fragment #fullstack
