Оптимистичное обновление для лайков / нелюбов и лайков с реагированием на натив, редукс

Question

Я создаю простое видео с возможностью нравится / не нравится, как это

но он не работает должным образом, когда нравится или не нравится отклонено, потому что в componentDidUpdate он собирается зацикливаться, и я не знаю, какое условие я должен использовать, чтобы предотвратить это. Это мой компонент:

  class PlayingVideo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      likedThis: _.includes(this.props.video.likedBy, this.props.user_id),
      likedLength: this.props.video.likedBy.length
    };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.likeVideoHasError) {
      this.setState({
        likedThis: false,
        likedLength: this.state.likedLength - 1
      });
    }
    if (this.props.dislikeVideoHasError) {
      this.setState({
        likedThis: true,
        ikedLength: this.state.likedLength + 1
      });
    }
  }

  like = () => {
    if (this.props.likeVideoPending || this.props.dislikeVideoPending) return;
    this.setState({ likedThis: true, likedLength: this.state.likedLength + 1 });
    this.props.dispatch(likeVideo(this.props.videoId));
  };
  dislike = () => {
    if (this.props.likeVideoPending || this.props.dislikeVideoPending) return;
    this.setState({
      likedThis: false,
      likedLength: this.state.likedLength - 1
    });
    this.props.dispatch(dislikeVideo(this.props.videoId));
  };

}
const mapStateToProps = (state, ownProps) => {
  return {
    likeVideoHasError: state.video.likeVideoHasError,
    dislikeVideoHasError: state.video.dislikeVideoHasError,
    likeVideoPending: state.video.likeVideoPending,
    dislikeVideoPending: state.video.dislikeVideoPending
  };
};

export default connect(mapStateToProps)(PlayingVideo);