Hacker News new | ask | show | jobs
by jmschlmrs 3294 days ago
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.

2 comments

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.
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}/>
Yes, class properties are the way to go.
Good suggestion - Thank you
Not using arrow functions in JSX code to define error handler. Yes, I believe you are right, that would create multiple handlers.