Updating state in Functional Component

Update state to re-render the component in React:

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

Syntax to update state in functional component:

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

Updating state to re-render in Functional Component Example:

Updating state in the functional component using the React JS hooks.

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" }}>
                w3wiki
            </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.

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

In React, when the state is updated it initiates to re-render the component and its child components to update the new data on the UI of the application.

Tags:

#React-Questions #ReactJS #Web Technologies