This content originally appeared on DEV Community and was authored by Rajan Prajapati
We all use <div> everytime when we work in react to wrap elements inside one element.
In React JSX,
To return multiple components or elements we have to wrap and group and all the elements inside a wrapper like div
But in the most of cases that div is not required at all and it takes an extra space in the DOM but still we have to use it because thats how React works
so React introduces a new feature in React 16.2 which are React Fragments
Now React Fragments works exactly like Div
You can wrap or group with Fragments
Also u can use Fragments shorthand (<> </>) instead of React.Fragments
But why to use Fragments ?
1.fast
Div element creates a ode in DOM and occupy some space but React Fragments never creates any node in DOM and never occupy any space which makes the app tiny bit faster
2.Less cluttered DOM
Having lots of nested div makes the DOM large and hard to read or debug but with Fragments, DOM become a little easy to look at and debug
This content originally appeared on DEV Community and was authored by Rajan Prajapati
Rajan Prajapati | Sciencx (2024-07-31T07:10:10+00:00) Do not Use <div> in React. Retrieved from https://www.scien.cx/2024/07/31/do-not-use-div-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.