How to update state to re-render the component in ReactJS ?

Last Updated : 20 Sep, 2024

In React, the component re-render triggers automatically when the state is modified or updated. When the state is updated in a component both the components and all its children components start re-rending and update the data on the web page.

Prerequisites:

How to update state in React Component

We have 2 types of components in react, we have the following approaches to update the state and re-render both type of components.

Table of Content

Using Hooks in Functional Component
Using setState in Class-based Component

Approach 1: Using Hooks in Functional Component

Using React useState hook to access and modify the state in the functional component.

Syntax:

setState((prev) => prev + 1);

Example: This example uses useState hook to update the state in functional components.

JavaScript

// Filename - App.js

import { useState } from "react";

function App() {
    const [counter, setCounter] = useState(0);

    const handleIncrease = () => {
        setCounter((prev) => prev + 1);
    };

    const handleDecrease = () => {
        setCounter((prev) => prev - 1);
    };

    console.log("Rendering!!!");

    return (
        <div
            style={{ textAlign: "center", margin: "auto" }}
        >
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            <h3>
                React exmaple for updating state to
                re-render in functional component
            </h3>
            <button onClick={handleDecrease}>
                decrease
            </button>
            <span style={{ margin: "10px" }}>
                {counter}
            </span>
            <button onClick={handleIncrease}>
                increase
            </button>
        </div>
    );
}

export default App;

Output: Open the browser and go to http://localhost:3000, you will see the following output.

Update state to re-render in functional component example - output

Approach 2: Using setState in Class-based Component

Updating the state to re-render in React class components using the setState method.

Syntax:

this.setState((prevState) => ({
    counter: prevState.counter + 1,
}));

Example: Re-render the component using set state in the react class component.

JavaScript

// Filename - App.js

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            counter: 0,
        };
    }

    handleIncrease = () => {
        this.setState((prevState) => ({
            counter: prevState.counter + 1,
        }));
    };

    handleDecrease = () => {
        this.setState((prevState) => ({
            counter: prevState.counter - 1,
        }));
    };

    render() {
        console.log("Rendering!!!");

        return (
            <div
                style={{
                    textAlign: "center",
                    margin: "auto",
                }}
            >
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h3>
                    React example for updating state to
                    re-render in class component
                </h3>
                <button onClick={this.handleDecrease}>
                    decrease
                </button>
                <span style={{ margin: "10px" }}>
                    {this.state.counter}
                </span>
                <button onClick={this.handleIncrease}>
                    increase
                </button>
            </div>
        );
    }
}

export default App;

Output: Open the browser and go to http://localhost:3000, you will see the following output.

Update state to re-render in class example - output

How to Create a Simple HTTP Server Listening at Port 3000 to Serve Video ?

shivamsingh00141

Improve

Article Tags :

How to update state to re-render the component in ReactJS ?

Prerequisites:

How to update state in React Component

Approach 1: Using Hooks in Functional Component

Syntax:

Approach 2: Using setState in Class-based Component

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?