What does the React.Fragment do?

Expert Posts
,
1

🔍 What is it?

  • React.Fragment is a built-in component provided by React that allows developers to group multiple React elements without adding extra nodes to the DOM.

❓ How is it used?

  • It is used as a wrapper around multiple JSX elements, providing a way to return multiple elements from a component's render method without introducing additional divs or other elements into the HTML structure.
  • Simply wrap the JSX elements inside <React.Fragment> tags or use the shorthand syntax <>.

Why is it needed?

  • It is needed to avoid adding unnecessary elements to the DOM when returning multiple elements from a component.
  • Using React.Fragment helps maintain a clean HTML structure and improves the readability of the code.

Examples:

// Without React.Fragment
render() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}


// With React.Fragment
render() {
  return (
    <React.Fragment>
      <h1>Hello</h1>
      <p>World</p>
    </React.Fragment>
  );
}


// With shorthand syntax <>
render() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

In each of these examples, the output will be the same, but using React.Fragment or the shorthand syntax helps avoid unnecessary wrapping elements in the DOM.