Skip to content
Related Articles

Related Articles

Improve Article

What’s the difference between forceUpdate vs setState ?

  • Last Updated : 14 Apr, 2021

The difference between forceUpdate() and setState() is te setState() re-render the component if some state or props of that component is changed. When we call setState() the lifecycle method shouldComponentUpdate() method calls automatically that decide if the component should re-render or not. The shouldComponentUpdate() method exit the update life cycle if there is no reason for re-render.

Whereas the forceUpdate() method re-render the component without even changing the state or props. When we call forceUpdate(), it will re-render the component and skip shouldComponentUpdate() method.

Note: We should try to stop using forceUpdate() wherever possible and read from this.props and this.state during rendering.

Difference between forceUpdate vs setState method are:

forceUpdate Method



setState Method

It re-render the component without even changing the state or props.

It re-render the component if some state or props of that component changed.

It skips the lifecycle shouldComponentUpdate method.

It calls the lifecycle shouldComponentUpdate method.

This method is not recommended.

We can use setState when want to update the state.

It method basically writes the data to this.state and then it calls the render method.It method does not write the data to this.state, it just simply calls the render method.

Example 1: Using the setState Method



Syntax:

this.setState({ state: this.state });

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.

App.js




import React, { Component } from 'react';
  
class App extends Component {
  state = {
    name: '',
  }
  
  handleChange = (x) => {
    const { name, value } = x.target;
    this.setState({
      [name]: value,
    });
  }
  
  render() {
    return (
      <div >
        Name:
        <input type="text" name="name" onChange={this.handleChange} />
        <div>
          <h4> Hi, {this.state.name}!</h4>
        </div>
      </div>
    );
  }
}
  
export default App;

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/, you will see the following output:

Explanation: As we can see from the above code when we type in the text box the setState() method calls that set the latest value of name and re-render the component each time.

Example 2. Using the forceUpdate Method

Syntax:

this.forceUpdate()

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.

App.js




import React from 'react';
class App extends React.Component{
    
  handleForceUpdate = ()=>{
    this.forceUpdate();
  };
    
  render(){
    return(
      <div>
        <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;

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/, you will see the following output:

Explanation: As we can see from the above example, the component is re-rendering without changing props or state because of the forceUpdate() method call. The random number is re-generating when the component is re-render.




My Personal Notes arrow_drop_up
Recommended Articles
Page :