Open In App

ReactJS forceUpdate() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The components in React will re-render only if the state of the component or the props passed to it changes but if we need to re-render the component if some data changes then we will use forceUpdate() method of React. Calling the forceUpdate() will forcibly re-render the component and thus calls the render() method of the component skipping the shouldComponentUpdate() method.

Tip: Normally, avoid all uses of forceUpdate() and only read from this.props and this.state in render().

Syntax:

component.forceUpdate(callback)

While there are certainly some use cases for using the forceUpdate() method but it’s better to use hooks, props, state, and context to re-render the component whenever you need.

Creating React Application:

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

npx create-react-app functiondemo

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

cd functiondemo

Project Structure: It will look like the following.

Project Structure

Example: In this example, we are going to build a React application that re-render the component when the button is clicked by calling the forceUpdate() method.

App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript




import React from 'react';
  
class App extends React.Component {
    reRender = () => {
  
        // Calling the forceUpdate() method
        this.forceUpdate();
    };
    render() {
  
        console.log('Component is re-rendered');
        return (
            <div>
                <h2>GeeksForGeeks</h2>
                <button onClick={this.reRender}>
                    Click To Re-Render
                </button>
            </div>
        );
    }
}
export default App;


Note: You can apply your own styling to the application.

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

npm start

Output: 


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