DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for React Anti Patterns Part 3
Grant Watson
Grant Watson

Posted on • Originally published at grantwatson.app

React Anti Patterns Part 3

The original post lives here

1. bind() and arrow functions in Components

\n

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.

\n\n

Demo

\n\n
\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
\n\n

Problems

\n

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\n
\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.

\n\n

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

\n\n
\n this.setState({ name: evt.target.value }) } value={this.state.name} />\n
\n\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

\n\n

Solutions

\n

\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

\n\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

Top comments (1)

Collapse
 
dance2die profile image
Sung M. Kim

Hi Grant.

Code snippets are formatted weird.

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: