MENU

component.forceUpdate(callback)

forceUpdate() is a method available only on class components — there is no equivalent method for function components, and you should almost never need it. Calling it will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

class MyComponent extends React.Component {
  handleButtonClick = () => {
    this.forceUpdate();
  }
  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick}>
          Click me
        </button>
      </div>
    );
  }
}

class MyComponent extends React.Component {
  handleButtonClick = () => {
    this.forceUpdate();
  }
  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick}>
          Click me
        </button>
      </div>
    );
  }
}

'callback' will be called after the update.

In function components, there's no forceUpdate() at all. If you genuinely need to force a re-render with no state change of your own (rare, and usually a sign the component's state design could be improved instead), the common workaround is to update a piece of state that exists solely for this purpose, such as an incrementing counter from useReducer: const [, forceRender] = useReducer(x => x + 1, 0);, then call forceRender().