17. What are React Fragments and how do you use them?

React Fragments allow you to group a list of children without adding extra nodes to the DOM. This is useful when you want to return multiple elements from a component without adding an extra HTML element.

Using React Fragments:

1. Using the shorthand Fragment syntax:

function ExampleComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </>
  );
}

2. Using the full Fragment syntax:

import React, { Fragment } from 'react';

function ExampleComponent() {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </Fragment>
  );
}

React Fragments are useful for optimizing the DOM structure and avoiding unnecessary nodes that can affect styling and performance of the application.