React Inbuilt components

React Fragments

React Fragments (<React.Fragment> or <>...</>) let you group multiple elements without adding extra DOM nodes. This is useful when a component needs to return multiple elements but should not introduce unnecessary parent elements.

Syntax

1. Full syntax

   function Example() {
     return (
       <React.Fragment>
         <h1>Title</h1>
         <p>Description</p>
       </React.Fragment>
     );
   }

2. Short syntax

   function Example() {
     return (
       <>
         <h1>Title</h1>
         <p>Description</p>
       </>
     );
   }

Fragments with Keys

When rendering a list, use React.Fragment with a key. The key is required in lists but not supported in <>...</> syntax.

function ItemList({ items }) {
  return items.map((item) => (
    <React.Fragment key={item.id}>
      <h3>{item.name}</h3>
      <p>{item.description}</p>
    </React.Fragment>
  ));
}

---

Profiler

<Profiler> lets you measure rendering performance of a React tree programmatically.

Wrap the <Profiler> component around a React tree to measure its rendering performance. It requires two props: an id (string) and an onRender callback (function) which React calls any time a component within the tree “commits” an update.

Profiling adds some additional overhead, so it is disabled in the production build by default.

Syntax

import React, { Profiler } from "react";

function onRenderCallback(
  id, // The "id" of the Profiler tree
  phase, // "mount" or "update"
  actualDuration, // Time spent rendering
  baseDuration, // Estimated time for rendering without memoization
  startTime, // When rendering started
  commitTime, // When React committed changes
  interactions // Set of interactions
) {
  console.log(`Profiler: ${id} took ${actualDuration}ms to render.`);
}

function MyComponent() {
  return (
    <Profiler id="MyComponent" onRender={onRenderCallback}>
      <ChildComponent />
    </Profiler>
  );
}

Profiler Callback Parameters

Parameter	Description
id	Name given to <Profiler> for tracking
phase	"mount" (first render) or "update" (re-render)
actualDuration	Time taken to render the component
baseDuration	Estimated time to render without optimizations
startTime	Timestamp when rendering started
commitTime	Timestamp when changes were committed
interactions	Set of interactions tracked by React

---

StrictMode

<StrictMode> helps identify potential problems in an application. It does not render anything in the UI but runs extra checks and warnings to improve code quality.

It introduces the following development-only behaviors (In production, everything runs normally):

1. Components re-render an additional time to detect bugs caused by impure rendering.
2. Effects execute an extra time to identify issues resulting from missing cleanup.
3. Ref callbacks run again to catch errors due to missing ref cleanup.
4. Components are inspected for the use of deprecated APIs.

<StrictMode> accepts no props.

Syntax

You can also enable Strict Mode for any part of your application. Wrap your app inside <StrictMode> in index.js or main.jsx. This enables strict checks for all components inside <App>.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);