ReactJS Rendering Elements

In this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered.

What are React Elements?

React elements are the smallest building blocks of a React application. They are different from DOM elements and they represent a description of what you want to see on the screen.

For example, a DOM node like a <div> or a user-defined component.

• They are plain JavaScript objects describing the UI structure.
• Unlike browser DOM elements, React elements are lightweight and immutable.
• React uses these elements to build a virtual DOM and then efficiently update the real DOM.

In short, React elements tell React what to render, not how to render it.

Rendering an Element in React

To render a React element to the browser’s DOM, you need a container or root DOM element, typically a <div> with an id like root or app. For example, your index.html file might include:

<div id="root"></div>

Now let's render a simple React element using a functional component, we must write the following in the App.js file.

// App.js
import React from 'react';

function App() {
    return (
        <div>
            <h1>Welcome to GeeksforGeeks!</h1>
        </div>
    );
}

export default App;

To mount this component into the root element:

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Output:

Now, you have created your first ever React Element and also have rendered it in place, but React was not developed to create static pages, the intention of using React is to create a more logical and active webpage. In order to do so, we will need to update the elements. This next section will guide us through the same.

Updating an Element in React

React elements are immutable, meaning you cannot modify their children or attributes after creation. To update the UI, you re-render the element with new values, typically using state and hooks in functional components.

Example: Updating Time with Functional Component

Below is an example of a functional component that updates the current time every second using the useEffect and useState hooks for dynamic rendering.

Write the following code in App.js file of your project directory.

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  const [currentTime, setCurrentTime] = useState(new Date().toLocaleTimeString());
  
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(interval); // Cleanup on unmount
  }, []);

  return (
    <div>
      <h1>Welcome to GeeksforGeeks!</h1>
      <h2>{currentTime}</h2>
    </div>
  );
}

// Render the component
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

export default App;

Output:

The time updates every second, while the heading remains static.

How It Works

• State Management: The useState hook manages the currentTime state.
• Side Effects: The useEffect hook sets up an interval to update the time every second and cleans up on component unmount to prevent memory leaks.
• Efficient Updates: Only the time in the <h2> element is re-rendered, leaving the static <h1> unchanged.

React Render Efficiency

React’s efficiency comes from its Virtual DOM and diffing algorithm, which minimize actual DOM updates. The rendering process involves:

1. Updating the Virtual DOM with new element data.
2. Comparing the updated Virtual DOM with the previous version.
3. Applying only the necessary changes to the browser’s DOM.

In the time example, only the <h2> element containing the time is updated, reducing costly DOM manipulations and improving performance.

Best Practices for Efficient Rendering

• Use Functional Components: They are lightweight and optimized for modern React.
• Leverage Hooks: useState and useEffect simplify state and side effect management.
• Prevent Unnecessary Renders: Use React.memo to avoid re-rendering unchanged components.
• Key Prop: Assign unique key attributes to lists for optimized updates.
• Stateful Components: Use stateful functional components for dynamic updates instead of manual render calls.