How to force ReactJS to re-render on every setState call ?
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 {
text-align : center ;
}
body {
background-color : antiquewhite
}
h 3 {
color : green ;
}
h 4 {
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/
Output
Last Updated :
24 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...