How best to use React.Fragment

Question

Option 1

import React from "react";

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        Component 
      </React.Fragment>
    );
  }
}

Option 2

import React, { Fragment } from "react";

class App extends React.Component{
  render() {
    return (
      <Fragment>
        Component 
      </Fragment>
    );
  }
}

Fragments let you group a list of children without adding extra nodes to the DOM.But there are two options for writing code. Which option is better?

Essentially the same thing as [extending React.Component vs Component](https://stackoverflow.com/questions/45031226/extending-react-component-vs-component) — JJJ, Jul 03 '19 at 07:16

score 1 · Answer 1 · answered Apr 13 '20 at 18:55

<></> syntax doesn’t support keys or attributes. When element is iterated it will throw the warning message 'Each child in a list should have a unique "key" prop'.

For Example :

{props.items.map(item => (
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
))}

Reference docs https://reactjs.org/docs/fragments.html#keyed-fragments

score 0 · Accepted Answer · answered Jul 03 '19 at 07:12

0

The second option is better because it shortens the code. What will happen if you need to use React.Fragment several times.

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <React.Fragment>
          <React.Fragment>Component</React.Fragment>
        </React.Fragment>
        <React.Fragment>
          <React.Fragment>Component</React.Fragment>
        </React.Fragment>
      </React.Fragment>
    );
  }
}




class App extends React.Component {
  render() {
    return (
      <Fragment>
        <Fragment>
          <Fragment>Component</Fragment>
        </Fragment>
        <Fragment>
          <Fragment>Component</Fragment>
        </Fragment>
      </Fragment>
    );
  }
}

By eye it is clear that the second option is better.

And there is a third option.

class App extends React.Component {
  render() {
    return (
      <>
        <>
          <>Component</>
        </>
        <>
          <>Component</>
        </>
      </>
    );
  }
}

answered Jul 03 '19 at 07:12

Edgar

6,022
8
33
66

3

I don't think there's ever a reason to nest fragments within each other. – Kevin Raoofi Jul 03 '19 at 07:17
4

While generally speaking, shorter code should be considered better, it's not 100% correct here. Sometimes, you want to prioritise readability and comprehensibility over short syntax. The reason why in its document, React use `React.Fragment` is to provide much needed context for the component, it wants to make it clear to the people who read code that the built-in `React.Fragment` is being used. As code is read much more than it's written, the same rule should be followed. – Thai Duong Tran Jul 03 '19 at 07:23
3

@Kevin Raoofi The reasons may be if you use TypeScript.Thai Duong Tran explained everything I wanted to say by this.And I have nothing to add. – Edgar Jul 03 '19 at 07:37
`<>>` syntax doesn’t support keys or attributes. When element is iterated it will throw the warning message 'Each child in a list should have a unique "key" prop'. – rajesh kumar Apr 13 '20 at 18:54

score 0 · Answer 3 · answered Jul 03 '19 at 07:19

First of all, the two methods are identical, so it's purely an individual opinion. I like the shortest version, as it's cleaner to look at, but since your are most likely only going to wrap children once pr. render, it's probably easier to use React.Fragment, so you don't have to think about imports. But as I said, they are the same, and it's a matter of individual taste.

score 0 · Answer 4 · answered Jul 03 '19 at 07:42

I think it's a matter of style.

I prefer to use the new <></> syntax

You don't even have to type the word "fragment", and isn't that what progress is really about?

The new syntax looks like this.

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <>
        Component 
      </>
    );
  }
}

You can read about it here https://reactjs.org/docs/fragments.html

Harshit Agarwal · Answer 5 · 2019-07-03T10:10:23.377

0

Option 3: With the new syntax, now its much easier to use fragments. If you wish to just wrap a bunch of child elements into 1 fragment and do not wish to add any class to the fragment. Just use the below syntax :

return (
  <>
    <Component 1 />
    <Component 2 />
  </>
)

edited Jul 03 '19 at 10:10

answered Jul 03 '19 at 08:54

Harshit Agarwal

2,308
2
15
23

How best to use React.Fragment

5 Answers5