Bind callback methods at TriadJS

Lightning talk at TriadJS
https://www.meetup.com/Triad-JS/events/241713225/

Transcript

1. When and how to
 bind callback methods twitter.com/ittordepam github.com/pedrottimark speakerdeck.com/pedrottimark
 /bind-callback-methods-at-triadjs
2. Painful problem For a non-arrow function,
 the value of this when it is called
 depends on how it is called.
3. depends on how it is called: • constructor new F or new F(…) • bound f.bind(context)(…) • apply or call f.apply or f.call(context, …) • method context.f(…) • function f(…)
4. A tale of two functions “It was the best of times, it was the worst of times…” for the Review Deck button in my fork of Zebreto from Learning React Native
5. class NewCard extends React.Component { _reviewDeck() { this.props.reviewDeck(this.props.deckID); } _reviewDisabled() { return this.props.noCardsDue; } } The two declarations look similar:
6. class NewCard extends React.Component { _reviewDeck() { this.props.reviewDeck(this.props.deckID); } _reviewDisabled() { return this.props.noCardsDue; } render() { return <Button onPress={this._reviewDeck} disabled={this._reviewDisabled()}> <InterfaceText>Review Deck</InterfaceText> </Button>; } } What about the invocations?
7. class NewCard extends React.Component { _reviewDeck() { this.props.reviewDeck(this.props.deckID); } _reviewDisabled() { return this.props.noCardsDue; } render() { return <Button onPress={this._reviewDeck} disabled={this._reviewDisabled()}> <InterfaceText>Review Deck</InterfaceText> </Button>; } } Here is a method invocation:
8. class NewCard extends React.Component { _reviewDeck() { this.props.reviewDeck(this.props.deckID); } _reviewDisabled() { return this.props.noCardsDue; } render() { return <Button onPress={this._reviewDeck} // callback: no parens disabled={this._reviewDisabled()}> <InterfaceText>Review Deck</InterfaceText> </Button>; } } Is this an invocation? No, it’s a function
9. The caller of the callback function 
 makes a function invocation f(…)
 not a method invocation context.f(…) The references to this don’t work: • undefined in strict mode • global or window otherwise
10. “Be careful about this in JSX callbacks. 
 If you refer to a method without () after it, 
 bind that method. This is not React-specific; 
 it is how functions work in JavaScript.” https://facebook.github.io/react/docs/handling-events.html
11. Simple solution For an arrow function,
 the value of this when it is called
 depends on where it is declared. Lexical this = consistent value of this Its context can’t change 

12. Patterns to bind callback methods // 1. React.createClass binds methods // 2. Bind callback function in render method // 3. Use arrow function in render method // 4. Bind callback function in constructor // 5. Define callback arrow function in constructor // 6. Declare arrow function as a class property
13. // 1. React.createClass binds methods: it isn’t the future of React var NewCard = React.createClass({ _reviewDeck: function () { this.props.reviewDeck(this.props.deckID); // does need bind :) }, _reviewDisabled: function () { return this.props.noCardsDue; // doesn’t need bind :( }, render: function () { return /* Button */; } });
14. // 2. Bind callback function in render method: be aware of perf class NewCard extends React.Component { _reviewDeck() { this.props.reviewDeck(this.props.deckID); } _reviewDisabled() { return this.props.noCardsDue; } render() { return <Button onPress={this._reviewDeck.bind(this)} disabled={this._reviewDisabled()}> <InterfaceText>Review Deck</InterfaceText> </Button>; } }
15. // 3. Use arrow function in render method: be aware of perf class NewCard extends React.Component { _reviewDeck() { this.props.reviewDeck(this.props.deckID); } _reviewDisabled() { return this.props.noCardsDue; } render() { return <Button onPress={() => { this._reviewDeck(); }} disabled={this._reviewDisabled()}> <InterfaceText>Review Deck</InterfaceText> </Button>; } }
16. // 4. Bind callback function in constructor: requires repetition class NewCard extends React.Component { constructor(props) { super(props); // property of instance = bound property of prototype this._reviewDeck = this._reviewDeck.bind(this); } _reviewDeck() { this.props.reviewDeck(this.props.deckID); } _reviewDisabled() { return this.props.noCardsDue; } render: function () { return /* Button */; } }
17. // 5. Define callback arrow function in constructor: different place class NewCard extends React.Component { constructor(props) { super(props); this._reviewDeck = () => { this.props.reviewDeck(this.props.deckID); }; } _reviewDisabled() { return this.props.noCardsDue; } render: function () { return /* Button */; } }
18. // 6. Declare arrow function as a class property: not (yet) standard class NewCard extends React.Component { _reviewDeck = () => { this.props.reviewDeck(this.props.deckID); } _reviewDisabled() { return this.props.noCardsDue; } render: function () { return /* Button */; } }
19. More information about arrow functions Understanding ECMAScript 6 Nicholas C. Zakas
20. More information about callback methods • https://medium.com/@housecor/react-binding- patterns-5-approaches-for-handling-this-92c651b5af56 • https://www.reddit.com/r/reactjs/comments/54xnao/ fat_arrow_vs_autobind_vs_bindbindbindbindbind/ d85wj0l