optimistic update for like/dislike and like count with react native, redux

Question

I am building simple video with like/dislike capability like this

but its not working properly when like or dislike rejected because in componentDidUpdate its going to loop and I dont know what condition should I use to prevent from that. This is my component:

  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);