Fragmentation Station

Jesse Billard
Sep 2, 2018 · 4 min read

React Fragments: what are they and what the heck are they used for?


When I first came across fragments in React, I thought to myself, “self…why do we need this?” Just wrapping everything up in a <div> already does the trick, why spend all that extra time on laborious coordinated finger lifting and hammering (aka typing)? Well like pretty much most things in the programming world, there’s a useful reason behind it and I just didn’t know what that reason was. TO THE DOCS! The second line in the documentation about fragments states…

Fragments let you group a list of children without adding extra nodes to the DOM.

At that point, my interpretation of fragments is that they are kind of like trimming the fat off the meat. Helping to keep things from cluttering up too much, especially as apps grow out. I’d definitely appreciate having less <div> tags to click through when inspecting the DOM. If it was a massive app with a humungous DOM tree, this could be hundreds of less <div> tags, which can aid in better performance.

But methinks to myself, “self…there must be more”, so I did what any intrepid inquisitive inquirer would do, and kept reading the docs! Lo and behold, there was more.

Good Golly Use Case!

The React overlords proceed to give another example for using fragments. With the use of HTML tables, CSS grids and flexbox, React fragments again show their merit. The docs demonstrate with this example…

We’ve two components, Table and Columns.

If the Columns component is all wrapped up in a <div> , the returned HTML will create issues.

What the resulting output would look like.

The console shows its displeasure.

But if we switch out those bad boy <div>' s in our Columns component and replace them with a piece of the <React.Fragment> goodness…

We’ve got a squeaky clean console and balance has been restored to the universe.

Regarding my previous potential displeasure with having to, and I quote myself, “spend all that extra time on laborious coordinated finger lifting and hammering (aka typing)”, the React council convened to make life easier for our digits. Instead of typing out the whole <React.Fragment> shebang, there’s a shorthand version that is simply wrapping your children with <></> . Like such…

V Clean

As of React v16.2.0 from 2017, the support for this shorthand syntax has grown significantly. This blog post from React gives a more in depth rundown of support across different development tools.

The main wizard himself, Dan Abramov responded to the usefulness of fragments in this stack overflow post. Three main points being…

  • Faster performance and less memory usage because of less <div> tags hogging space in large apps.
  • Tables, CSS grids and flexbox have specific relationship needs between parents and children. Extra <div> tags can mess these up royally.
  • Cleaner time when inspecting the DOM with devtools.

That’s a wrap! React fragments are your friend. Though they are small, they are mighty and make the developer experience all the better for their being.

Sorcery:

Jesse Billard

Written by

A blog for chronicling a coding journey

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade