Using React Fragments

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

Articles & Tutorials

React Fragments: An overview (
Mar 17, 2021
This tutorial is designed to help you understand React Fragments and various use cases where it would come in handy.
  • Vijit Ail
Rendering sibling elements in React using Fragments (
Nov 26, 2019
One of the advantages of using React to render a user interface is that it’s easy to break up the UI into components. However, a common problem that arises is when we want to return sibling elements with no parent. React has a feature called Fragments that provides the solution.
  • Danny Guo
React Fragments in Practice – 4 real-world examples (
Jan 23, 2019
Learn how to use React Fragments let to group React elements, without requiring unnecessary markup or confusing key props.
The React Fragment (
Oct 31, 2018
How to use React.Fragment to create invisible HTML tags
Render Children in React Using Fragment or Array Components (
Jul 17, 2018
In this post, we'll be looking at the rendering power React 16 introduced — namely, the ability to render children using Fragments and Array Components.
  • Kingsley Silas
Using React Fragments for the first time (
Dec 18, 2017
React v16 was a very exciting release for React, and included many new features. In the recent React 16.2 release, improved support for Fragments was announced, and it’s this feature that I want to talk about today.
React v16.2.0: Improved Support for Fragments (
Nov 28, 2017
React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments.
  • Clement Hoang
React v16.0 (
Sep 26, 2017
We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.