optimistic update برای like و dislike در react native

سلام
من میخوام یه همچین چیزی
https://cdn-images-1.medium.com/max/1000/1*i5iv7nAiQWdyuIlKDHidDA.gif
با استفاده از ریکت نیتیو و ریداکس بسازم که همون طور که مشخصه قابلیت like و dislike و تعداد like ها رو داره. این هم کامپوننتم هست ولی نمیدونم شرط داخل 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 - ۱
});
}
if (this.props.dislikeVideoHasError) {
this.setState({
likedThis: true,
ikedLength: this.state.likedLength + ۱
});
}
}

like = () => {
if (this.props.likeVideoPending || this.props.dislikeVideoPending) return;
this.setState({ likedThis: true, likedLength: this.state.likedLength + ۱ });
this.props.dispatch(likeVideo(this.props.videoId));
};
dislike = () => {
if (this.props.likeVideoPending || this.props.dislikeVideoPending) return;
this.setState({
likedThis: false,
likedLength: this.state.likedLength - ۱
});
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);