Skip to content

Commit

Permalink
Update ES6 class documentation with binding perf
Browse files Browse the repository at this point in the history
Adding a note in the ES6 class documentation about function binding.  Recommending that you bind your handlers in the constructor so that they are referentially the same function every time render is invoked (helps with child components that might potentially call shouldComponentUpdate)
  • Loading branch information
mfunkie authored and Mark Funk committed Mar 29, 2016
1 parent 7f01c47 commit fb13cf5
Showing 1 changed file with 30 additions and 2 deletions.
32 changes: 30 additions & 2 deletions docs/docs/05-reusable-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -205,13 +205,14 @@ export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick.bind(this)}>
<div onClick={this.tick}>
Clicks: {this.state.count}
</div>
);
Expand All @@ -223,7 +224,34 @@ Counter.defaultProps = { initialCount: 0 };

### No Autobinding

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` or [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`.
Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` or [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`:

```javascript
// You can use bind() to preserve `this`
<div onClick={this.tick.bind(this)}>

// Or you can use arrow functions
<div onClick={() => this.tick()}>
```

We recommend that you bind your event handlers in the constructor so they are only bound once for every instance:

```javascript
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
```

Now you can use `this.tick` directly as it was bound once in the constructor:

```javascript
// It is already bound in the constructor
<div onClick={this.tick}>
```

This is better for performance of your application, especially if you implement [shouldComponentUpdate()](/react/docs/component-specs.html#updating-shouldcomponentupdate) with a [shallow comparison](/react/docs/shallow-compare.html) in the child components.

### No Mixins

Expand Down

0 comments on commit fb13cf5

Please sign in to comment.