Articles → REACT.JS → React Fragment In The Render Method In React Js

React Fragment In The Render Method In React Js

This article will discuss the react fragment in the render method.

Purpose

The render method uses JSX expression for defining the HTML element.

Picture showing the render method in the jsx file

Click to Enlarge

The JSX expression should have only one parent element.

Picture showing the error message when there are more than one parent

Click to Enlarge

You can use the div element as the topmost parent element. But the div implements the prototype chain of HTMLDivElement → HTMLElement → Element → Node → EventTarget (See this link)

React.js introduced a lightweight React Fragment. React Fragment implements the prototype chain of Element → Node → EventTarget (See this HYPERLINK Link)

How To Use The “Render Fragment”?

You can use the Render Fragment in the following manner.

import React from 'react';
import ReactDOM from 'react-dom'


const element = <React.Fragment>Hello World</React.Fragment>;

ReactDOM.render(element, document.getElementById('root'));

Benefits Of Using The “Render Fragment”

Using the Render Fragment has the following benefits: -

Fragment is faster
DOM is less cluttered

Use Hooks For Using Fragments

You can also use hooks for Fragments. See the following example

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';


const element = <Fragment>Hello World</Fragment>;

ReactDOM.render(
    element,
  document.getElementById('root')
);

Posted By -	Karan Gupta

Posted On -	Monday, August 2, 2021

Updated On -	Monday, October 18, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**