One of the dirty irritations in is function context, that is to say what is the meaning of the keyword in any particular function. This is particularly galling in an environment where one is likely to pass around functions as variables a lot (like JavaScript for example). JavaScript this When making components we come across this problem pretty much every time we make a component with some kind of user interaction. Consider the following code: React If you try and run this code, you’ll get a exception thrown: Cannot read property ‘setState’ of undefined This is specifically thrown from line 8 of the code above. It’s caused by the fact that the value of isn’t set when the React event system calls your passed function. There are two common fixes to this problem and I think both have problems. this The first is to bind the event to an arrow function instead. This preserves the entire calling context which includes ‘this’, ‘super’ and a number of other things not preserved in a normal function expression. That looks like this: <button onClick={() => this.handleClick()}>Click Me!</button> Because this preserves the calling context it will work just fine. There are two problems with this method though. Firstly you would need to pass in all the correct arguments from the arrow function, essentially acting as a proxy function ( somewhat mitigates this but it’s messy) and secondly it creates a new arrow function every time render() is called which, in a React app, is a lot. We don’t need all that extra garbage. ...args Another alternative is to use a This is a function in which the value of is forced to whatever you like but it’s usually used to preserve the current calling context as shown below: bound function. this <button onClick={this.handleClick.bind(this)}>Click Me!</button> This essentially creates a kind of wrapper for handleClick which sets the value of before calling it. By doing this though we are creating a new function every time render() is called. this still A solution to all these problems is to use something available in ES7 (via babel) called a (A small correction from via twitter: **“**Class Properties aren’t part of ES7. They are a stage 2 proposal. No guarantee that they will get through.” Thanks, Dan) What’s particularly useful to us is that Property Initializers are only evaluated when the class is instantiated so if we initialize a class property to an arrow function, the value of will be preserved. Neat, huh? Property Initializer. Dan Abramov this This means we: Don’t have to pass arguments in a proxy object Don’t create a new function every time render() is called. The code looks like this: You’ll also notice that I’ve assigned the initial as a Property Initializer as well so we can just get rid of the whole constructor as a bonus! state As an aside, if you’re wondering why I passed a function to instead of a delta object as is usually shown, follow me to read my next article 😃. setState on twitter If you liked this article please remember to click the_💚_ symbol below to make sure more people get to read it! Steven Poulton is a web developer and technical architect living in Manchester, England. In his spare time he likes to make indie music, make indie games and play with his indie cats.

Super

Twitter

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

Function context in bound events in React

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@CalinLeafshade

RELATED STORIES