React Style Guide question: bind and arrow functions in render

[dartess]

https://github.com/airbnb/javascript/tree/master/react#methods

Using bind is bad. Why? A bind call in the render path creates a brand new function on every single render. And we should use arrow functions. But, AFAIK, arrow functions also creates a brand new function on every single render. What I do not understand?

[ljharb]

The wording on our guide probably needs improvement.

The issues are as follows:

1. Generally speaking, using .bind in the render path is slower than using arrow functions in the render path, because .bind is inherently slower.
2. Creating a new function in the render path by any means, and passing it as a prop into a custom component, will defeat PureComponent-like optimizations (also memo, etc), causing unnecessary and likely excessive rerenders, hurting page performance.
3. One common approach to fix both of these is to use arrow functions in class fields, however, this should never be done. It makes them hard to test (because a reference to them is passed into the render tree before you get the chance to stub/spy on them), and it potentially hurts performance because it creates the function anew for every instance. If instead you constructor-bind (or field-bind) an instance method, then you've addressed all the prior problems, and ensured that the "meat" of the function lives once on the prototype, which maximizes the chance for the engine to be able to optimize it (since it will be running more times).

A PR to improve the guide to explain this better, with code examples, would be appreciated.

[Ensive]

@ljharb When you have time please review the relevant PR.
@dartess you might want to take a look as well