What’s the difference between forceUpdate vs setState ?

The difference between forceUpdate() and setState() is i.e 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 which decides if the component should re-render or not. The shouldComponentUpdate() method exits the update life cycle if there is no reason for re-rendering.

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

Steps to Create React Application:

Step 1: Create a react project folder and install locally by npm i create-react-app.

npm create-react-app project

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

cd project

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",
}

Using the setState Method:

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

Syntax:

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

Example: As we can see from the below 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.

Javascript

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

Using the forceUpdate Method:

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

Syntax:

this.forceUpdate()

Explanation: 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.

Javascript

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

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.