forceUpdate() Method in ReactJS

In this article, we will learn what is used and how to use of forceUpdate() method in react js.

forceUpdate() method used for rerendering the component without changing the state. we can rerender the component as we want in the application. if we want without state change the component rerendered in that time we can use forceUpdate() method.

you can see the below syntax of  forceUpdate() method.

component.forceUpdate(callback)

Here, in the below example we have to call forceUpdate() method on the button click and rerender the component at a click on the button. you can see the below example of how you can use the forceUpdate() method.

import React from 'react'

class ExplorePage extends React.Component {
  handleButtonClick = () => {
    this.forceUpdate()
  }
  render() {
    console.log('re-rendering the component')
    return (
      <>
        <div>
          <h2>forceUpdate() method</h2>
          <button onClick={this.handleButtonClick}>Button</button>
        </div>
      </>
    )
  }
}
export default ExplorePage

you can see the output at below.