In my component implementation, *doSomething* function is triggered on a user button click. The problem is that *doSomething* takes around 200-1100ms to complete execution with a state change. I face the problem where rapid button clicks trigger this function body simultaneously which causes unexpected final states. 

I **don't require a complex mutual exclusion solution**. The requirement is just to ignore all other calls until the current execution finishes, I tried the following flagging approach:

```
doSomething = () => {
    if(this.running){
        return //ignore the event
    }
    this.running=true;
    //do processing
    this.setState({someVariable:answer_of_process}, ()=>this.running=false);
}

render(){
    return(<ImportedComponent doSomething={this.doSomething}/>)
}

```

This made the probability of state corruption lesser but, occasionally it happens.ie: *before 20% now 2%* . How do I improve this solution to be 0% of the failure rate?

**Edited:**
The function triggering button is from an imported complex component and it cannot be disabled. The component takes *doSomething* as a prop.