Why is componentDidMount stuck in infinite loop? - reactjs

Question

I'm trying to update the comment section in my app.
First in componentDidMount I fetch and list if there are comments. I'm sending post request when submitting new comment and then re-render my component and show all possible comments.
When updating component I'm calling componentDidUpdate, passing an if statement prevState.commentHistory !== this.state.commentHistory and after I'm trying to get the list of all comments again. That is when my app goes into infinite loop.
Any help would be appreciated.
class CommentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
commentText: '',
commentHistory: [],
};
}
componentDidMount = () => {
this.getMethod()
}
componentDidUpdate = (prevProps, prevState) => {
if (prevState.commentHistory !== this.state.commentHistory) {
this.getMethod()
}
}
getMethod = () => {
requestConsoleAPI('GET', 'something/' + getDetailPageId() + '/comments', null, (response) => {
this.setState({ commentHistory: response})
})
}
handleChange = (e) => {
e.preventDefault();
this.setState({
[e.target.name]: e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault();
let data = {
comment: this.state.commentText
}
if (data.comment) {
requestConsoleAPI('POST', 'something/' + getDetailPageId() +'/comments', data, (response) => {
this.setState({ commentHistory: [response] })
})
}
this.setState({
commentText: '',
})
}
render() {
let renderComments = this.state.commentHistory.map((singleComment) => {
return (
<tr data-id={singleComment.id} key={singleComment.id}>
<td>{singleComment.createdAt}</td>
<td>{singleComment.author}</td>
<td>{singleComment.text}</td>
</tr>
)
});
return (
<div className="change-wrapper hidden" id="comments">
<div className="change-head">
<h3 data-count="X">Comments</h3>
</div>
<div className="change-body">
<form className="form" onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-lg-12">
<div className="form-group">
<textarea name="commentText" value={this.state.commentText} onChange={this.handleChange} className="form-control" placeholder="Your comment..." rows="8"></textarea>
</div>
<div className="form-group m-t-25">
<button type="submit" className="btn btn-next" >Send Comment</button>
</div>
</div>
</div>
</form>
<div className="row">
<div className="list col-lg-12">
<h4 className="m-t-50">Comment History</h4>
<table className="table table-striped table-comments">
<thead>
<tr>
<th>Created</th>
<th>Author</th>
<th>Message</th>
</tr>
</thead>
<tbody>
{ renderComments }
</tbody>
<tfoot>
<tr>
<td colSpan="3" className="text-center"><i>No comments yet</i></td>
</tr>
</tfoot>
</table>
{/* {{ consoleMacros.listLoading() }} */}
</div>
</div>
</div>
</div>
);
}
}
const domContainer = document.querySelector('#comment_container');
ReactDOM.render(<CommentComponent/>, domContainer);

Answer 1

As stated by El Aoutar Hamza, you're comparing the arrays reference instead of checking its values. If you want to compare two arrays, you'll have to check each value between them. But, as far as I understand, for your case, you can simply compare the array's length, this way your UI will update everytime some comment is added/removed