The original post lives here

1. bind() and arrow functions in Components

You must have bound your custom functions in the constructor function before using them as props for components. If you declare components using the extends keyword, then the custom functions (such as updateValue below) lose their this bindings. So, if you want to access this.state, or this.props or this.setState then you need to re-bind them.

Demo

\nclass app extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: ''\n    };\n    this.updateValue = this.updateValue.bind(this);\n  }\nupdateValue(evt) {\n    this.setState({\n      name: evt.target.value\n    });\n  }\nrender() {\n    return (\n      \n            \n      \n    )\n  }\n}\n

Problems

There are two ways to bind the custom functions to the component’s this. One way is to bind them in the constructor as done above. The other way is to bind at the time of passing as prop value —

\n\n

This method suffers from a problem. Since .bind() creates a new function each time it is run, this method would lead to a new function being created every time the render function executes. This has some performance implications. However, in a small app it may not be noticeable. As the app grows large, the difference will start to materialise.

Arrow functions entails the same performance concerns that were there with bind.

\n this.setState({ name: evt.target.value }) } value={this.state.name} />\n

\nThis way of writing is definitely clearer. You can see what’s going on in the onChange prop itself. But, this also creates new anonymous function every time input renders. So it has the same performance penalty as above. Turns out, there hasn’t been any performance measurements as to how slow inline functions are. Also, most of the time, they are equally performant. Check out the article for a more in-depth discussion on this.\n

Solutions

\nThe best way to avoid the above performance penalty is to bind the functions in the constructor itself. This way only one extra function is created at the time of component creation, and that function is used even when render is executed again.\nIt often happens that you forget to bind your functions in the constructor, and then you get an error (Cannot find X on undefined.). Babel has a plugin that let’s you write auto-bound function using the fat-arrow syntax. The plugin is Class properties transform. Now you can write components like this —\n

\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: ''\n    };\n// Look ma! No functions to bind!\n}\nupdateValue = (evt) => {\n    this.setState({\n      name: evt.target.value\n    });\n  }\nrender() {\n    return (\n      \n        \n      \n    )\n  }\n}\n