React Fragment is a feature in React that allows developers to group a list of children without adding extra nodes to the DOM. This is particularly useful for situations where you want to return multiple elements from a component without having to add an extra wrapper element.

Before the introduction of React Fragment, developers would often use a div or a span to group multiple elements. However, this would add an extra node to the DOM, which could cause unnecessary re-renders and negatively impact the performance of the application.

To create a fragment, you can use the React.Fragment component, or you can use the short syntax <> and </>. Here's an example using the long syntax:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>Heading</h1>
        <p>Paragraph</p>
      </React.Fragment>
    );
  }
}

import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Heading</h1>
      <p>Paragraph</p>
    </React.Fragment>
  );
}

And here's the same example using the short syntax:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <>
        <h1>Heading</h1>
        <p>Paragraph</p>
      </>
    );
  }
}

import React from 'react';

function MyComponent() {
  return (
    <>
      <h1>Heading</h1>
      <p>Paragraph</p>
    </>
  );
}

One important thing to note is that short syntax fragments cannot have a key or other props, so you cannot use them to wrap a list of elements and pass a key prop to each element. Instead, you should use the long syntax like so:

import React from 'react';

class App extends React.Component {
  render() {
    const items = ['item 1', 'item 2', 'item 3'];

    return (
      <ul>
        {items.map((item, index) => (
          <React.Fragment key={index}>
	    <li>{item}</li>
	  </React.Fragment>
        ))}
      </ul>
    );
  }
}

export default App;

import React from 'react';

function App() {
  const items = ['item 1', 'item 2', 'item 3'];

  return (
    <ul>
      {items.map((item, index) => (
        <React.Fragment key={index}>{item}</React.Fragment>
      ))}
    </ul>
  );
}

export default App

Fragments can be useful for reducing the number of wrapper elements in your code, which can make it easier to read and debug.

In an interview, you may be asked about when and why you would use fragments, as well as how they differ from other methods of grouping elements in React, such as using an additional wrapper element or an array. You may also be asked to compare and contrast fragments with other ways of grouping elements, such as using the div element or using a div element with a unique class name for styling purposes.

Fragments can be useful for reducing the number of wrapper elements in code, making it easier to read and debug. Sooner or later you will fall in love with them.

React Fragment

A way to group a list of children without adding extra nodes to the DOM

A way to group a list of children and add extra nodes to the DOM

A way to group a list of children and add a key prop to each element

A way to group a list of children and add a class name for styling purposes

When you want to render a group of elements as a single unit but don't want to add an additional wrapper element around them

When you want to render a group of elements as a single unit and add an additional wrapper element around them

When you want to render a group of elements as a single unit and add a key prop to each element

When you want to render a group of elements as a single unit and add a class name for styling purposes

Fragments do not add extra nodes to the DOM, whereas other methods do

Fragments cannot have a key or other props, whereas other methods can

How do fragments differ from other methods of grouping elements in React, such as using an additional wrapper element or an array?