Member-only story
This post summarizes why and when I use React Fragment.
Why I use React Fragment?
React Fragment allows me to create lesser div which means lesser nested hierarchy in my DOM.
By using React Fragment properly, you definitely optimized your DOM. Personally, I discovered React Fragment’s purpose is similar to ng-container in Angular. You can read more about ng-container here.
When I use it?
Normally I always started with a div in a component 1st. When I completely organized my UI layout in my component, I will evaluate whether the div is required or I can replace it with Fragment.
The below code snippet comes from my blog.
There are 2 ways on how you can implement React Fragment in your JSX. You can either use <React.Fragment>, the conventional way or <>, which is the shorthand way.
Most of the code I saw thus far, they’re using the shorthand way.
From the code above, I evaluated that I don’t need to have another div to wrap my Navbar and etc. since I don't need to do any styling or layout organization.
Originally published at https://tekloon.dev.
