Function called on loop when setting state inside of it

Question

I've got a handlePageClick function called like this inside of my render:

onPageChange={this.handlePageClick}

The functions is:

handlePageClick = data => {

    this.setState({
        circleloading: true
    });
    let names = ["page"]
    let values = [data.selected]
    this.updatePublications(names,values)

}

For some reason when I do that the function gets called indifinitely? Why?

However when I do the exact same thing inside of other functions that get called on some other time it works fine. So I thought maybe the fact that the function gets triggered by the 'onPageChange' had something to do.

Update, here's my updatePublications function:

  updatePublications(names,values){
    let queryParameters = this.generateQueryParametersPackage();
    this.updateQueryParameters(queryParameters,names,values)
    this.pushParameters(names,values);
    let currentComponent = this
    PublicationService.getPublications(queryParameters).then(function (response){
        if(response.status !== StatusCode.OK){
            ErrorService.logError(currentComponent.props,response)
            return;
        }
        currentComponent.setState({
            // other variables ,
            circleloading: false
        })
        currentComponent.updateFilters(queryParameters)
    })
}

updateFilters(queryParameters){
    let currentComponent = this
    PublicationService.getFilters(queryParameters).then(function (response){
        if(response.status !== StatusCode.OK){
            ErrorService.logError(currentComponent.props,response)
            return;
        }
        currentComponent.setState({
            filters: response.data
        })
        currentComponent.hideEmptyFilters(response.data,"locations","filterLocationHeader");
    })
}

Answer 1

Use arrow function onPageChange={(e) => this.handlePageClick()} and it will fire on the event. Without it will fire rerender fire etc. SetState rerenders, function gets called on render.

SetState (in handlePageClick) forces a rerender and then the function will be called again because it's just inline and not in the arrow function.

After some research I have found:

https://stackoverflow.com/a/52849831/12694208

In your Pagination component render

Change

 onPageChange={this.handlePageClick}

to

 onPageChange={(e) => this.handlePageClick(e)}

&&

https://stackoverflow.com/a/52849820/12694208

Change this in your child component while your using click function inside render user arrow function

onPageChange={(e) => this.handlePageClick()}

Both seem to support my case. I would recommend to use the arrow function .

If you still have an issue it may be your setState({})

Triggers on page load:

componentDidMount() {}

Triggers on rerender

componentDidUpdate(prevProps, prevState) {}

Triggers before rerender, returns true, you can return false and it will prevent rerender

shouldComponentUpdate(nextProps, nextState) {}

To troubleshoot, check these, if the update calls a function that changes a state it will loop indefinitely. If you don't have them inside your components and the arrow function doesn't help you have to provide more details please.