What is the correct way to update the component in this case?

Question

React

Hello!
I implement logics with a ban on the re-rendering of the component if the button is clicked. Now the code is like this:

state = {
  updatesLocked : false
};

shouldComponentUpdate(nextProps, nextState) {
  return !nextState.updatesLocked
}

updatesButtonHandle = () => {
  this.setState({
    updatesLocked : !this.state.updatesLocked
  });
}

render () {
  const { updatesLocked } = this.state;
  return (
    <div className={styles.updatesButton} onClick={this.updatesButtonHandle} role="presentation">
      {updatesLocked ? (
        <div className={styles.lockIcon}>
          <LockClosedIcon />
        </div>
      ) : (
        <div className={styles.lockIcon}>
          <LockOpenIcon />
        </div>
      )}
    </div>
  )
}

As you can see from the code, when I click on the button, I change the state and, based on the state, I disable / allow updating the component, but there is a problem with changing the icon in the button. It doesn't update when you click on it (because shouldComponentUpdate fires).
How can I update the icon on button click?
Thanks

Answer 1

The condition for allowing an update should be a little more complicated - when denied, you must allow an update if you are trying to unlock, i.e.:

shouldComponentUpdate(nextProps, nextState) {
  return !this.state.updatesLocked || !nextState.updatesLocked;
}