ReactJs Fragments

Syntax

<React.Fragment>
    {/*Children*/}
</React.Fragment>

Example

import React, { Fragment } from 'react';

const App = () => {
    return (
        <Fragment>
            <h1>React Fragments Example</h1>
            <p>This is an example of how to use React Fragments.</p>
        </Fragment>
    )
}

export default App;

Output

React Fragments Example

This is an example of how to use React Fragments.

Explanation

React Fragments allow you to group a list of children without adding extra nodes to the DOM. It is essentially a way to group a list of elements without adding a wrapper element.

Use

• Grouping a list of elements without adding a wrapper element to the DOM.
• Avoiding unnecessary rendering of elements.

Important Points

• Fragments do not create any extra nodes in the DOM.
• Fragments are supported in React version 16.2 and above.

Summary

React Fragments are a way to group a list of elements without adding a wrapper element to the DOM. It eliminates the need for unnecessary nodes and can improve rendering performance.