Hacker News Reader

Comment by jmschlmrs | Hacker News Reader

Are you using arrow functions? I find that using es2015 arrow functions for class methods takes care of most of the problems around this and react.

The only annoyance is dealing with binding event handlers to items/components in a list. Generally you need to abstract the list item into it's own component and do the event handler binding there.

I don't use .bind() anywhere in my react code.

View on HN

Yep, we are using arrow functions and other ES2015+ goodies, but they don't help with event handlers. In fact, I believe class property syntax helps with that, but we only figured it out after we built these few pages and components necessary for the web app part.

>Yep, we are using arrow functions and other ES2015+ goodies, but they don't help with event handlers.

They do. Just do:

  myHandler = (v) => {
    ...
  }

and you don't need to bind in the constructor anymore. You'll need to use Babel of course to transpile that.

Yes, class properties syntax. I mentioned that in the article.

Hmm, so why do you say "but they don't help with event handlers"? Because it's not yet standard?

Sorry, I didn't think about the arrow functions being used in class property syntax too. :) So yes, they do help with event handlers, I stand corrected.

One note: From what I've read, using arrow functions as props in a render method of a component will create new functions each render, so you might end up with a good bit more GC than normal. There are some nice little mix-ins that will autobind to remove the need to remember to .bind everything.

Not using arrow functions in JSX code to define error handler. Yes, I believe you are right, that would create multiple handlers.

Nowadays you can just stick a class property anywhere in your React component:

   handleSomething = (params) => {
     ...
   };

and the use it in your render function like this without any binding:

  <Foo onSomething={this.handleSomething}/>

Good suggestion - Thank you

Yes, class properties are the way to go.

Reply on news.ycombinator.com