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.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/