Hacker News Reader

Comment by supergreg | Hacker News Reader

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?

View on HN

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