Maximum update depth exceeded- React component error

Question

I am trying to implement lazy loading in my react component. But whenever I update my state in reducer after calling the (loadMore) function it gives me this error.

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Here is my article rendering file where i am implementing lazy loading. I am not setState anywhere in the render. I am not able to understand where the error is. This component is called in article container. Below is the table.js component code-

---

class Table extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    }
}

loadMore = () => {
    if (this.props.articleReducer.article_data.length > 0) {
        this.props.dispatch(loadArticleDataApi(2, 'lazyLoad'));
    }
}
render() {
    return (
        <div>
            <InfiniteScroll pageStart={1} loadMore={this.loadMore} initialLoad={true}
                hasMore={true} loader={< div className = "loader" key = {0}> Loading ...</div>}>
                <div className="table">
                    <div className="container ">
                        <div className="show-grid row">
                            <div className="col-xs-4 head1">Title</div>
                            <div className="col-xs-2 head2">Pub All</div>
                            <div className="col-xs-2 head3">Publisher</div>
                            <div className="col-xs-2 head4">Rss</div>
                            <div className="col-xs-1 head5">AMP</div>
                            <div className="col-xs-1 head7">Publish</div>
                        </div>
                        {this.props.articleReducer.article_data.map((ele, index) => {
                                let hreff = `https://so.city/amp/delhi/${ele._id}.html`;
                                return (

                                    <div className="show-grid row rowData" key={index}>
                                        <div className="col-xs-4">{ele.title}</div>
                                        <div className="col-xs-2">
                                            <SwitchButtonPubAll checkedProp={ele.allFeedPublished}/>
                                        </div>
                                        <div className="col-xs-2 publisher">{ele.createdBy}</div>
                                        <div className="col-xs-2">
                                            <SwitchButton checkedProp={ele.rssCreated}/>
                                        </div>
                                        <div className="col-xs-1 amp">
                                            <i className="fa fa-refresh" aria-hidden="true"></i>
                                            &nbsp;
                                            <a href={hreff}>
                                                <i className="fa fa-link" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                        <div className="col-xs-1">
                                            <i
                                                className={ele.published === 1
                                                ? "fa fa-eye eyee"
                                                : "fa fa-eye-slash"}
                                                aria-hidden="true"></i>
                                        </div>
                                    </div>
                                )
                            })}
                    </div>
                </div>
            </InfiniteScroll>
        </div>
    )
}
}

const mapDispatchToProps = (dispatch) => {
return {dispatch};
}
export default connect(state => state, mapDispatchToProps)(Table);

Answer 1

I suspect that you are using React Infinite Scroller and this answer is based on that.

The problem is that you are setting hasMore={true}. When you scroll to the end of page and hasMore is true, the component request more data by call loadMore, the new data is the same as the previous one (so the page is not scrolled up) but hasMore is still true (it must be false to tells the component that there is no new data) so it calls loadMore again, and again,... and crash.

Solution: Provide a mechanic to check if there is new data available and pass it to hasMore