Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ryanflorence/187e82831d36fe8fa91952b616a33527 to your computer and use it in GitHub Desktop.
Save ryanflorence/187e82831d36fe8fa91952b616a33527 to your computer and use it in GitHub Desktop.
class Dashboard extends Component {
constructor(props) {
super(props)
// bind? slows down the initialization path, looks awful
// when you have 20 of them (I have seen your code, I know)
// and it increases bundle size
this.handleStuff = this.handleStuff.bind(this)
// _this is ugly.
var _this = this
this.handleStuff = function() {
_this.setState({})
}
// If you can use an ES class then you can probably use an arrow
// function (babel, or a modern browser). This isn't too bad but
// putting all of your handlers in the constructor is kind of
// not awesome
this.handleStuff = () => {
this.setState({})
}
}
// this is nice, but it isn't JavaScript, not yet anyway, so now
// we need to talk about how TC39 works and evaluate our draft
// stage risk tolerance
handleStuff = () => {}
}
@designgrill
Copy link

@ryanflorence it would be great if you can elaborate on why the last pattern, handleStuff = () => {}, isn't good enough for event handlers. I tend to prefer that over inlining handler functions for readability and code reuse point of view at least.

@jey07ro
Copy link

jey07ro commented Jan 26, 2018

The last pattern looks the cleans so what do you mean by is not Javascript yet?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment