Open In App
Related Articles

How to force ReactJS to re-render on every setState call ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

React components automatically re-render when state or props change. To force a re-render without changes, use the `forceUpdate()` method, bypassing the `shouldComponentUpdate()` lifecycle method. `shouldComponentUpdate()` enables components to exit the update lifecycle when unnecessary re-renders are to be avoided.

Syntax:

this.forceUpdate()

Approach:

  • Component Structure:
    • Create a React class component (`App`) with a `handleForceUpdate` method invoking `forceUpdate()` to trigger a re-render without changing state or props.
  • User Interface (UI):
    • Implement a UI with a button triggering the `handleForceUpdate` method and displaying a random number updated on each force re-render.
  • Styling:
    • Apply styling using an external CSS file (`App.css`) to format the component and present the UI elements for clarity.

Steps to Create the React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e., foldername, move to it using the following command:

cd foldername

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Javascript

import React from 'react';
import './App.css';
class App extends React.Component {
 
    handleForceUpdate = () => {
        this.forceUpdate();
    };
 
    render() {
        return (
            <div className='App'>
                <h3>
                    Example of forceUpdate() method to
                    show re-rendering <br></br>
                    without changing state or props
                </h3>
                <button onClick={this.handleForceUpdate} >
                    FORCE UPDATE
                </button>
                <h4>Number is :
                    {Math.floor(Math.random() * (100000 - 1 + 1)) + 1}
                </h4>
            </div>
        );
    }
}
 
export default App;

                    

CSS

/* App.css  */
.App {
  text-align: center;
}
 
body {
  background-color: antiquewhite
}
 
h3 {
  color: green;
}
 
h4 {
  color: rgb(8, 53, 54);
  font-size: large;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
 
button {
  width: 16em;
  height: 2em;
  font-size: medium;
  background-color: aquamarine;
  border-radius: 5px;
  border: none;
}
 
button:hover {
  background-color: rgb(88, 116, 106);
  color: white;
}

                    

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/


ForceUpdateGIF

Output




Last Updated : 24 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads