React: Doc to explain how to bind methods with arrow functions

[kutyel]

Do you want to request a _feature_ or report a _bug_?
A feature, more specifically, an improvement in the docs.

What is the current behavior?
I have read trough all of React documentation in the last days and was confused by this section:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
  this.tick = this.tick.bind(this);
}

The docs say it is _better performant_ and I couldn't find a place in the docs where it shows the arrow function alternative. I just accidentally learn it from some open source GitHub projects and from a react-codemod:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
}
tick = () => { /* tick implementation */ }

Does this approach have the _same_ performance? Shouldn't it be somewhere in the docs?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).
It is not a bug.

What is the expected behavior?
There should be any kind of mention to the arrow function approach to bind methods to the component or preferably, should be well documented.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I am sure it is due to an update on React itself, but I am not sure in what version.

---

PD: BTW, if this issue is accepted and planned, I would be happy to make a PR to fix it, with some guidance from the community about what else to include in the docs. :wink:

[syranide]

For all intents and purposes they are the same. IIRC that feature has not been accepted into the standard yet, or has it changed?

[hawkrives]

According to the tc39 proposals repo, Public Class Fields is stage 2 at the moment.

[kutyel]

Oh... so it's a matter of whether it ends in the ECMAScript or not, OK. But then, why has the facebook team prepared a codemod for that? It is just anticipation?

[gaearon]

We are dogfooding this proposal internally at Facebook.

[aweary]

The Babel react preset should probably support this before it's added to the documentation. Currently, you need to use the transform-class-properties to get this working.

[kevinSuttle]

Sidebar: what about the proposed bind operator?
https://github.com/tc39/proposal-bind-operator

[gaearon]

This experimental proposal is now mentioned in the docs.

@kevinSuttle It doesn't solve the issue for us because it rebinds on every render.

[kutyel]

@gaearon great! Nice work with the docs Dan! ;)