ReactJS render() Method

In React, lifecycle methods manage a component’s behaviour at different stages. The render() method is important for defining the UI, updating it whenever state, props, or context changes, and ensuring the UI stays in sync with the component’s data.

What is the Render() Method in ReactJS?

The render() method is an essential part of React class components that determines what gets displayed on the user interface (UI). It plays a key role in rendering elements and updating the UI dynamically.

• The render() method in React is the lifecycle method.
• The render() method gets called automatically.
• It must return JSX or null.
• It cannot mutate state.
• The logic and the calculation should be written and performed outside the render() method.

Syntax

class MyComponent extends React.Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}

How do render() Work?

The render() method is called every time React determines that a component’s state or props have changed. When this happens, React re-renders the component, calling the render() method to generate a new version of the UI.

Here’s a basic example of how the render() method works

import React, { Component } from 'react';
class Welcome extends Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}
export default Welcome;

Output

In the example above

• Welcome is a class-based component.
• The render() method returns a simple JSX element, which displays the name prop passed to the component.
• Every time the name prop changes, the render() method will be triggered again to reflect the updated name in the UI.

Implementing render() Method

This React class component, Greeting, uses state to conditionally render a welcome message or login prompt based on the user's login status.

import React, { Component } from 'react';

class Greeting extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Anjali',  // Initial state
            isLoggedIn: true,
        };
    }

    render() {
        // Conditional rendering based on state
        if (this.state.isLoggedIn) {
            return (
                <div>
                    <h1>Welcome back, {this.state.name}!</h1>
                    <button onClick={() => this.setState({ isLoggedIn: false })}>Log out</button>
                </div>
            );
        } else {
            return (
                <div>
                    <h1>Please log in.</h1>
                    <button onClick={() => this.setState({ isLoggedIn: true })}>Log in</button>
                </div>
            );
        }
    }
}

export default Greeting;

Output:

In this example

• The constructor() method initializes the component’s state with name and isLoggedIn properties.
• The render() method is responsible for returning JSX based on the component’s state.
• If isLoggedIn is true, it shows a welcome message and a "Log out" button.
• If isLoggedIn is false, it shows a "Please log in." message and a "Log in" button.
• The onClick event handlers on the buttons call this.setState() to toggle the isLoggedIn state, which triggers the re-render of the component.

In React 18, the render() method is replaced by the createRoot. Using the render method in react 18 will show a warning, and your app will work like it's still using React 17, not taking advantage of new features in React 18. To use React 18 features, you should use createRoot() instead of render().

Interesting Fact about the ReactJS render() Method

• Returns Virtual DOM, Not Real DOM: The render() method does not modify the real DOM directly. It updates the Virtual DOM, and React efficiently updates only the necessary changes.

class MyComponent extends React.Component {
    render() {
        return <h1>Hello, Virtual DOM!</h1>;
    }
}

• Triggers Reconciliation Process: React compares the old Virtual DOM with the new one and updates only the changed parts, improving performance.
• Must Return a Single Parent Element: The render() method must return a single parent element. Use <div> or <React.Fragment> if needed.

class MyComponent extends React.Component {
    render() {
        return (
            <>
                <h1>Title</h1>
                <p>Description</p>
            </>
        );
    }
}

• Should Be a Pure Function: render() should be a pure function, meaning it should not modify state directly to avoid infinite loops.

render() {
    this.setState({ count: this.state.count + 1 }); // Wrong!  
    return <h1>Count: {this.state.count}</h1>;
}

Correct Approach: Use Event Handlers or Lifecycle Methods

componentDidMount() {
    this.setState({ count: this.state.count + 1 });
}

• Triggers Automatically on State or Prop Changes:

When setState() or new props are received, render() is called again automatically.

class Message extends React.Component {
    render() {
        return <h1>{this.props.text}</h1>;
    }
}

<Message text="Hello, React!" /> // Changing props will trigger re-render

• Cannot Be Asynchronous: The render() method cannot be async. Use componentDidMount() or useEffect() for async operations.

Incorrect: Async render() (Will Cause an Error)

async render() {
    const data = await fetchData(); //  Wrong 
    return <h1>{data}</h1>;
}

Correct Approach: Use componentDidMount()

componentDidMount() {
    fetch("https://api.example.com/data")
        .then(response => response.json())
        .then(data => this.setState({ data }));
}

render() in Functional Component (Not exist explicity)

In functional components, the render() method does not exist explicitly. Instead, the component itself is a function that returns JSX. When state or props change, React automatically re-renders the component, and the function is called again to return the updated JSX.

import React, { useState } from 'react';

const Greeting = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(true);
    const [name, setName] = useState('Anjali');

    return (
        <div>
            {isLoggedIn ? (
                <>
                    <h1>Welcome back, {name}!</h1>
                    <button onClick={() => setIsLoggedIn(false)}>Log out</button>
                </>
            ) : (
                <>
                    <h1>Please log in.</h1>
                    <button onClick={() => setIsLoggedIn(true)}>Log in</button>
                </>
            )}
        </div>
    );
};

export default Greeting;

Output:

In this example the render() method is not used, it has returned the JSX directly.

In a functional component, there is no separate "render" method because the function itself acts as the render method and they directly returns the JSX but in the class components we define a render method within the class,

Purpose of render() Method

• The render() method defines how the component's UI should appear on the screen.
• It returns JSX, which is a combination of HTML and JavaScript used to describe the component’s structure.
• The method runs automatically every time the component’s state or props change, updating the UI accordingly.
• It ensures that the component's content is always in sync with its state and the data it receives.