Hacker News Reader

Comment by acdha | Hacker News Reader

It seems odd to read something written in 2017 about the confusion from using `this` which only mentions arrow functions briefly in passing. A fairly high percentage of discussion on that issue could be replaced with “use an arrow function, it works the way you expect”, and browser support should be basically the same as ES6 classes – doesn't work in IE11 but multiple tools are available for backwards compatibility.

View on HN

Agreed - I don't find the usage of "this" to have any cognitive load, as long as arrow functions are used everywhere. "Arrow functions only" isn't a tough standard to maintain.

Do arrow functions get added to the prototype or the instance of the object? Can they be created directly in the class body or have to be added inside the class constructor?

Since I last checked it was still experimental, albeit available in Babel, but there is work on syntax for property initialisers in class bodies e.g:

  class X {
    id = (x) => x;
  }

See here:

https://github.com/jeffmo/es-class-fields-and-static-propert...

My understanding is that arrow functions aren’t used as part of a class definition, but for things like anonymous functions in callbacks, preserving the ‘this’ context when something else is invoking it.

E.g. el.onClick((e) => {this.doSomething();});

In that case something else will invoke the onClick callback but we want the ‘this’ context to the same as when we set up the onClick.

Disadvantage is that creating a new function on every render ruins performance optimizations like `React.PureComponent`. Although that's a pretty minor detail, (you shouldn't prematurely optimize, and sometimes PureComponent is actually more expensive than rerendering since computing whether props have changed can be more expensive than just rerendering.)

That's why I mentioned it since it seems to be something like 90% of the bugs I've seen related to this. It's not a coincidence that this is the example used in the article.

Reply on news.ycombinator.com