React fragments: What and Why

React fragments were a feature released in React 16.2. They have been around for a while now but have been a relatively lesser used feature. Let us explore the what and why the feature exists.

What are React Fragments?

React fragments are a syntax addition to React that allow wrapping or grouping of multiple HTML elements without the need for any additional DOM nodes. We mostly come across this situation when a React component needs to return multiple elements.

- Advertisement -

The traditional approach has been to wrap them in a div element because a React component can return only one element. This behavior results in useless additional markup and also makes the DOM tree heavy with additional layers of divs.

The traditional solution to render 3 child components in a single component would have been:

const App = () => {
  return (
    <div>
      <ChildA />
      <ChildB />
      <ChildC />
    </div>
  );
}

With fragments, this can be:

const App = () => {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
React.Fragment can also be replaced by empty tags as <></> as well and that works too.
const App = () => {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Why React fragments?

There are 3 typical use cases for fragments.

1. Returning groups of elements

This one is the typical use case for fragments. As discussed above, using fragments avoids additional div containers that can make the DOM heavy and also often cause problems when styling things.

2. Conditional rendering

Fragments make it easier to conditionally render groups of elements without any extra markup.

const Login = ({isLoggedIn, name}) => {
    {isLoggedIn ? (
        <>
          <h3>Welcome {name}</h3>
          <p>
            You are logged in!
          </p>
        </>
      ) : (
        <>
          <h3>Login</h3>
              <input type="text" id="username" />
              <input type="password" id="password" />
              <input type="submit" value="Login" />
        </>
      )}
}

3. Rendering arrays with keyed fragments

Fragments can have key props! This is yet another powerful feature which can be pretty handy at times. This cannot be used with the empty tags though.

This can be helpful when rendering lists, such as:

const Glossary = ({items}) => {
  return (
    <>
      {items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </>
  );
}

Advantages

  • React fragments are a but faster and have little lesser memory consumption (lesser DOM nodes). This is helpful in applications with deep tree structures.
  • Styling can be easier at times since there is no additional div created. Sometimes some libraries depend on parent child relationships, and the div in the middle causes layout issues.
  • The DOM is easier to inspect because of less clutter.

And that is all there is to know about React fragments!

Recent Articles

Specifying a node version in Repl.it

I was recently trying to use a later version of Node on Repl.it. I wanted to use a package that supported ES...

Accessing the clipboard in JavaScript

Developers are probably the laziest people on the planet. And of all the things, copy-paste is our favorite keyboard shortcut. But what...

Using counters in CSS to number elements automatically

Ordered lists have been an important part of web design for quite a while now. If we needed more control over the...

How to remove a property from a JavaScript object

There are two ways to remove a property from a JavaScript object: one is the mutable way of doing it by using...

Script to change Zoom virtual background every day

Over the past few months, I found a new use of the pictures that I have clicked while hiking. I started using...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.