I have a Question component and I receive callback finish when the question is finished. I want to show loading when I run operations from the finish function. But When I try to setState({isLoading: true}), It's been called repeatedly.

I am using the Class component. and here's the Question component I have used.

<QuestionCard
    questionData={question}
    next={this.next}
    previous={this.previous}
    finish={this.finish}
/>

And the finish function is as -

finish = () => {
   console.log('Finish')
   this.setState({isLoading: true})
}

So When I update the state of isLoading, it seems the component is re-rendered, and the finish function is called continuously. How I can stop this to work once and my loader to start loading?

I know there are some other questions also like this but those are not solving my issue. So please suggest solution for this.