Rendering Elements

Rendering is one of the core concepts of React. It’s how React takes your components and data and displays them on the screen. Understanding rendering helps you create dynamic, efficient, and interactive web applications.

What Does “Rendering” Mean in React?

In React, rendering means displaying UI elements on the screen.

React elements are the smallest building blocks of a React app.

A React element describes what you want to see in the UI:

React then renders this element into the DOM (Document Object Model) so that users can see it in their browser.

const element = <h1>Hello, React!</h1>;

Rendering Elements to the DOM

In plain JavaScript, you use document.getElementById() or innerHTML() to manipulate the page.

In React, this is done using ReactDOM.createRoot() and root.render().

Example:

import React from "react";
import ReactDOM from "react-dom/client";

const element = <h1>Hello, World!</h1>;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

Updating the Rendered Elements

React elements are immutable — once created, they don’t change.

To update the UI, you create a new element and render it again.

Example – Updating Time Dynamically:

function tick() {
  const element = (
    <div>
      <h1>Hello, React!</h1>
      <h2>Current time: {new Date().toLocaleTimeString()}</h2>
    </div>
  );

  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(element);
}

setInterval(tick, 1000);

Rendering Multiple Elements

You can render multiple elements at once inside a single parent element.

const element = (
  <div>
    <h1>Welcome to React!</h1>
    <p>Learn how to render elements effectively.</p>
  </div>
);

React Fragments – Grouping Multiple Elements

Fragments let you group elements without adding extra nodes to the DOM.

Example – Using Fragments:

function Article() {
  return (
    <><h1>React Fragments Example</h1>
      <p>This is how you can return multiple elements.</p>
    </>
  );

Why use Fragments?

• Avoids unnecessary <div> wrappers.
• Keeps your DOM clean.
• Makes layouts more efficient.

Alternate syntax:

<React.Fragment>
  <h2>Heading</h2>
  <p>Content</p>
</React.Fragment>

Rendering Lists in React

Often, you’ll need to render arrays of data — such as user lists, products, or messages.

React makes this easy using JavaScript’s .map() method.

Example – Rendering a List of Names:

function NameList() {
  const names = ["Alice", "Bob", "Charlie"];

  return (
    <ul>
      {names.map((name) => (
        <li>{name}</li>
      ))}
    </ul>
  );
}

How it works:

• .map() loops through the array.
• Each value is returned as a new <li> element.
• JSX {} allows embedding JavaScript expressions inside the markup.

The Importance of Keys in Lists

When rendering lists, each child needs a unique “key” prop.

Keys help React track elements efficiently — identifying which items changed, were added, or removed.

Example with Keys:

function NameList() {
  const names = ["Alice", "Bob", "Charlie"];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

React now uses the id value to efficiently re-render only changed elements.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Combining Fragments, Lists, and Keys

You can use Fragments inside Lists to return multiple elements per item — without adding unnecessary wrapper tags.

Example – Product List:

const products = [
  { id: 1, name: "Laptop", price: "$1000" },
  { id: 2, name: "Phone", price: "$500" },
];

function ProductList() {
  return (
    <>
      {products.map((product) => (
        <React.Fragment key={product.id}>
          <h3>{product.name}</h3>
          <p>Price: {product.price}</p>
        </React.Fragment>
      ))}
    </>
  );
}