In this part, I will show you about good benefits when using fragments in React.

Previous articles:

PART 1: REACT PROPS AND STATE

PART 2: THE HOOKS ARE USED POPULARLY IN REACT

What are fragments?

Fragments to group a list of children without adding extra nodes to the DOM, and has no effect on the resulting DOM. It is the same as if the elements were not grouped.

You need to use either or a shorter syntax having an empty tag (<></>).

Below is an example of how to use fragments inside the UsernameWithAvatar component.

const UsernameWithAvatar({username, description, photoUrl}) {
  return (
      <>
        <h2>{username}</h2>
        <p>{description}</p>
        <img src={photoUrl} alt="Username with avatar"/>
      </>
    );
}

Why fragments are better than container divs?

• Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
• Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout.
• The DOM Inspector is less cluttered.

Wish you all good study !!!