componentWillUpdate infinite loop when setState - reactjs

Question

I need to listen to changes in the state, and if I change it, pass it to the props, but when I try to make the setState an infinite loop and an error begins. Is it possible to make a condition so that there is no error or can there be another way to transfer data from the component?
ProfileTag.js
import React, {Component} from 'react';
import classnames from 'classnames';
import './ProfileTag.scss';
import Tag from './Tag';
class ProfileTag extends Component {
state = {
tags: this.props.tags
}
onKeyUp = (e) => {
// Space -> 32 and enter is 13
if (e.which === 32 || e.which === 13) {
let input = e.target.value.trim().split(" ")[0];
if (input.length === 0 || input[0] === "") return; // empty tags
this.setState({
tags: [...this.state.tags, input]
});
e.target.value = "";
}
}
onDeleteTag = (tag) => {
const tags = this.state.tags.filter((t) => {
return (t !== tag);
});
// console.log("tags: ", tags);
this.setState({tags: tags});
}
componentWillUpdate(nextProps, nextState) {
console.log(nextProps)
console.log(nextState)
this.props.getTags(nextState.tags);
}
render() {
const tags = this.state.tags.map((tag, i) => {
return <Tag
onDeleteTag={this.onDeleteTag}
key={i}
value={tag}/>
});
return (
<div className="ProfileTag">
<label className="ProfileTag__title"
htmlFor={this.props.name}>{this.props.label}</label>
<input
onKeyUp={(e) => this.onKeyUp(e)}
type={this.props.type}
className={classnames('ProfileTag__input')}
placeholder={this.props.placeholder}
name={this.props.name}
id={this.props.name}
value={this.props.value}
disabled={this.props.disabled}
/>
<ul className="ProfileTag__tags">{tags}</ul>
</div>
)
}
}
export default ProfileTag;
Here error:
import React, {Component, Fragment} from 'react';
import connect from 'react-redux/es/connect/connect';
import ProfileTag from '../common/Tag/ProfileTag';
class Profile extends Component {
constructor() {
super();
this.state = {};
}
getTags(tags) {
console.log(tags)
// Here error
this.setState({tata: 'vava'});
}
render() {
let profileContent = (
<div className="Profile">
<ProfileTag
label="Введите теги (ваша основная специальность)"
placeholder="Тег"
name="test1"
tags={this.state.profile.tags}
getTags={this.getTags.bind(this)}
/>
</div>
);
return (
<Fragment>
{profileContent}
</Fragment>
);
}
}
const mapStateToProps = state => ({
profile: state.profile
});
export default connect(mapStateToProps, {getCurrentProfile, postProfile})(Profile);

Answer 1

Two things you should change
componentWillUpdate is deprecated in latest versions, use componentDidUpdate instead
Do not call a function from componentDidUpdate which calls setState directly otherwise your code will go into an infinite loop
Code example
componentDidUpdate(prevProps, prevState) {
if(prevState.tags !== this.state.tags) { // you can use isEqual from lodash for a equality check on arrays or objects
this.props.getTags(this.state.tags);
}
}

Answer 2

in componentDidUpdate ,never use setState,every time when it changes state which would be continuous ,it will go in infinite loop. You can check the with prevprops in componentDidUpdate(object prevProps, object prevState), and make sure you have new props in your hand.
Outside of your componentdidupdate ,create a callback function and with prevprops you can setstate there.