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.
Prerequisites
Update state to re-render the component in React:
There are different ways in the functional and class components to update a state to re-render the component in React JS.
- update state to re-render the functional component using Hooks
- update state to re-render the class component using setState method
1. Updating state in Functional Component
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.
2. Updating state in Class Component
Updating the state to re-render in React class components using the setState method.
Syntax for Updating state in class component
this.setState((prevState) => ({
counter: prevState.counter + 1,
}));
Udating state to re-render in Class Component 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" }}> w3wiki </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.