5 ms·
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 an
by jmschlmrs 9y 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.
- miroslavpopovic 9y agoYep, 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.
- coldtea 9y ago>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.
- miroslavpopovic 9y agoYes, class properties syntax. I mentioned that in the article.
- coldtea 9y agoHmm, so why do you say "but they don't help with event handlers"? Because it's not yet standard?
- miroslavpopovic 9y agoSorry, 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.
- nbclark 9y agoOne 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.
- miroslavpopovic 9y agoNot using arrow functions in JSX code to define error handler. Yes, I believe you are right, that would create multiple handlers.
- Androider 9y agoNowadays 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}/>
- nbclark 9y agoGood suggestion - Thank you
- miroslavpopovic 9y agoYes, class properties are the way to go.