Jsx no bind rule

[nitish24p]

The no bind rule flags of the following jsx code.

renderButton(someParams){
  return(
    <ButtonComponent
      onClick={this.handleClick.bind(this, someParams)} // <- Error here
    >
      Submit
    </ButtonComponent>  
  )
}

How ever if i modify the same function

renderButton(someParams){
  const clickHandler = this.handleClick.bind(this, someParams);
  return(
    <ButtonComponent
      onClick={clickHandler}
    >
      Submit
    </ButtonComponent>  
  )
}

The error is not thrown, how ever effectively the same thing of creating a new function when the renderButton method is called takes place, only in the second case a separate variable has been assigned. But in terms of memory allocation a new function is being created in both cases and though the rule will give a sign off it'll still not impact performance.

Proposal
Modify the scope of the rule to see if bind is called within that function scope..

I may be completely wrong in some assumptions but would like a discussion here , if possible.

[ljharb]

Yes, that should also warn, if possible.