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.
